html - 拉伸(stretch)到 100% 的内容，而不是浏览器大小

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%;最小高度:100%

Demo with no content

Demo with lots of content