<body>可伸展到100%的内容，而不是浏览器大小
<body>可伸展到100%的内容，而不是浏览器大小
提问于 2014-05-22 22:09:49
我目前在尝试在浏览器窗口下面扩展一个容器时遇到了一个问题。
我添加了一个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;
}回答 2
Stack Overflow用户
发布于 2014-05-22 22:14:02
将html, body { height:100% }更改为html, body { height: 100%; min-height:100% }
Demo with no content
Demo with lots of content
Stack Overflow用户
发布于 2014-05-22 22:21:37
#container {
width:100%;
min-height:100%;
margin:0;
background-color:red;
}这将扩展容器以始终填充浏览器宽度，即使内容较少也是如此。
您不需要为body指定min-height:100%，因为主体将根据子对象(即container )继承高度
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23809266
复制相关文章
相似问题
腾讯云开发者
