Question

我目前在尝试将容器扩展到浏览器窗口下方时遇到问题。

我添加了一个jsfiddle：http://jsfiddle.net/v9GKj/

当内容比侧边栏长时，我正在寻找一个扩展到浏览器尺寸以下的解决方案，但是当内容不多时仍会填充窗口的高度

<div id="menubg"></div>
<div id="menu">
    <div class="sidenav">
        <ul>
            <li><a href="#">Nav</a></li>
            <li><a href="#">Nav</a></li>
            <li><a href="#">Nav</a></li>
            <li><a href="#">Nav</a></li>
            <li><a href="#">Nav</a></li>
        </ul>
    </div>
</div>
<div id="container">
    <div id="content">
         test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
         test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
         test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
         test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />

    </div>
</div>

CSS：

    html, body {
margin:0;
padding:0;
border:0;
height:100%;
}

body {
position:relative;
background-color:blue;
}

#container {
width:100%;
height:100%;
margin:0;
background-color:red;
}

#content {
width:1060px;
padding-left:210px;
margin-left:auto;
margin-right:auto;
}


#menubg {
background-color:rgba(0, 0, 0, 0.4);
position:fixed;
left:0px;
top:0px;
bottom:0px; 
width:200px;
}

#menu {
position:absolute;
left:0px;
top:0px;
bottom:0px; 
width:200px;
}

 .sidenav ul {
list-style-type:none;
font-size:large;
margin:0px;
padding:0px;
opacity:1;
}

.sidenav a:link, .sidenav a:visited {
display:block;
color: #ffffff;
text-decoration:none;
padding:10px;
width:180px;
border-bottom:1px solid white;
border-top:1px solid gray;
opacity:1;
}

.sidenav a:hover {
color:#262626;
background-color:white;
}

Answer 1

将html, body { height:100% }更改为html, body { height: 100%; min-height:100% }

Demo with no content

Demo with lots of content

Answer 2

#container {
width:100%;
min-height:100%;
margin:0;
background-color:red;
}

即使内容较少，这也会扩展容器以始终填充浏览器宽度。

您不需要为min-height:100%指定body，因为正文将根据container

的子项继承高度

延伸到100％的内容，而不是浏览器大小

2 个答案: