我得到了以下代码,但没有做到这一点:
<div id="wrap">
<div class="navigation">
<ul>
<li>
</li>
</ul>
</div>
<div id="main">
Content
</div>
</div>
我希望包裹为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;
}
有人可以帮我解决这个问题吗? 在此先感谢
答案 0 :(得分:4)
更改wrap
的样式。 Live Demo
#wrap {
min-height: 100%; /* Minimum height for modern browsers */
height:100%; /* Minimum height for IE */
width:100%;
position:absolute;
overflow:hidden;
border:1px solid blue;
}
答案 1 :(得分:1)
在您的情况下,#main div似乎不一定需要扩展到100%。需要扩展的是红色背景。
我建议使用“人造背景”。使用position:fixed
,您可以添加不会随页面滚动的红色背景。其余内容可以滚动它。类似于this。
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>