Html div 高度 100% div 内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14714222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div height 100% within div
提问by Jimmy Tschonga
I got the followin code, which doesn't do the trick:
我得到了以下代码，但它不起作用：
<div id="wrap">
<div class="navigation">
<ul>
<li>
</li>
</ul>
</div>
<div id="main">
Content
</div>
</div>
I want the wrap to be 100% height. This works just fine. But as soon as i try the #main div to be 100% heights as well, it doesn't. This div always collapses to the height of content.
我希望包裹是 100% 的高度。这工作得很好。但是一旦我尝试将 #main div 设为 100% 高度，它就不会。这个 div 总是折叠到内容的高度。
html{height:100%;}
body{overflow-y:scroll; margin:0px; padding:0px; height:100%;}
#wrap{
min-height: 100%; /* Mindesth?he für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesth?he für den IE */
width:100%;
position:absolute;
overflow:hidden;
}
#main{
width: 980px !important;
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
height:auto !important;
}
Can somebody please help me solve this problem? Thanks in Advance
有人可以帮我解决这个问题吗？提前致谢
回答by ATOzTOA
回答by showdev
In your case, it doesn't seem that the #main div necessarily needs to expand to 100%. What needs to expand is the red background.
在您的情况下，#main div 似乎不一定需要扩展到 100%。需要展开的是红色背景。
I suggest using a "faux background". Using position:fixed, you can add a red background that will not scroll with the page. The rest of the content can scroll over it. Something like this.
我建议使用“人造背景”。使用position:fixed，您可以添加不随页面滚动的红色背景。其余内容可以滚动浏览。像这样的东西。
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
div#background {
position: fixed;
width: 100%;
height: 100%;
}
div#background div#color {
position: relative;
background-color: red;
width: 980px;
height: 100%;
margin: 0px auto;
}
div#nav {
position: relative;
background-color: #FFF;
}
div#main {
position: relative;
width: 950px;
margin: 0px auto;
}<div id="background">
<div id="color"></div>
</div>
<div id="nav">NAVIGATION<br />even two lines<br /> or more</div>
<div id="main">
<p>CONTENT GOES HERE</p>
</div>