包装器不随内容扩展

Question

我正在为页面创建滑入/滑出侧栏，但除非包装DIV覆盖了人体的整个宽度和高度，否则我不能这样做，但我不知道为什么。

我不确定要包括什么代码，所以我在这里包括了一些我认为是的代码。 如果您需要预览所有代码，我在下面提供了Pastebin链接。

发行图片-http: //i.imgur.com/wWNAeBP.png 如果需要，请在此处查看所有代码：

HTML- http://pastebin.com/TQT6Xc4z CSS- http://pastebin.com/mS5Gh56x

提前致谢。

HTML：

<div id="wrapper">
    <div id="sidebar">
        <nav id="nav">
            <h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
            <div id="searchbar">
                <form action="http://www.example.com/search.php">
                    <input type="text" name="search" placeholder=" Book Search" class="searchstyle"/>
                </form>
            </div>
            <ul>
                <li style="background-color: #333">
                    <a href="1Index.html" class="link">
                        <span style="color: #ed786a">Home</span>
                    </a>
                </li>
                <li>
                    <a href="2Catgeories.html" class="link">
                        Categories
                    </a>
                </li>
                <li>
                    <a href="http://example.com" class="link">
                        Bestsellers
                    </a>
                </li>
                <li>
                    <a href="http://example.com" class="link">
                        Find Us
                    </a>
                </li>
                <li>
                    <a href="http://example.com" class="link">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>
    </div>

CSS：

html, body { /* ### */
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
body {
    background-color: #fdfdfd;
    font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
    width: 100%;
    height: 100%;
    margin:0 0 0 20%; /* ### */
}
#sidebar {
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}

在尝试创建打开和关闭侧边栏时，已经在此方面停留了很长时间，因此将不胜感激！

Answer 1

浏览您的容器并取出：

height: 100%; // this is scaling your containers to the window height leaving white space...

   #containerthree {
   width: 80%;
   height: 100%;   <-- here is the problem
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   color: #888888;
   padding: 0 0 2em 0;
   border-bottom: 2px solid #DADADA;
   box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
  }

Answer 2

尝试将包装器CSS更改为

#wrapper {
    width: 100%;
    height: auto;
    overflow:auto;
    margin:0 0 0 20%; /* ### */
}