我有以下 html:
<body>
<div id="page">
<div id="header"></div>
<div id="content"></div>
</div>
</body>
和CSS:
html,body {
margin:0;
padding:0;
height:100%;
}
#page {
height:100%;
margin:auto;
left:0;
right:0;
width:500px;
}
#header {
height:100px;
width:500px;
}
#content {
width:500px;
height:100%;
}
问题是content div是window的高度+header的高度。 我怎样才能使它成为窗口的高度 - 标题的高度，我的意思是在整个剩余窗口上水平拉伸(stretch)。 ??
最佳答案
如果您不需要支持 IE7 及更低版本 - 您可以使用一个有用的技巧
position: absolute
对于#header 和
padding-top: 100px;
box-sizing: border-box;
对于#content。
看看这个 fiddle :http://jsfiddle.net/Jx4sC/2/
关于框大小支持的详细信息:http://caniuse.com/#feat=css3-boxsizing
关于html - CSS 高度 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20373439/