我试图做一个固定标题和可滚动内容区域的网页。这是微不足道的，当标题具有已知的高度，但我正在努力找到一个解决方案，当标题是流动的。
我想要的布局是：
-------------- head -------------- content --------------
其中“head”是其内容需要的高度，“content”没有最小高度，但在可滚动之前将达到视口底部的最大高度。
这是可能的这些天在纯CSS吗？我的目标是IE8。
为了澄清我想要的，here is what I would do if I knew the height of the header：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
#head {
background: yellow;
height: 20px; /* I can't rely on knowing this. */
}
#content {
background: red;
position: absolute;
top: 20px; /* here also */
bottom: 0;
width: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div id="head">some variable height content</div>
<div id="content">
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
scrollable content<br/>
</div>
</body>
</html>
解决方法
假设“固定”你的意思是位置：固定，我不认为它可能在纯CSS，因为position：fixed从文档流中取出元素。
但是，它应该只需要一两行JavaScript来得到你想要的。这样的东西(未经测试，仅为了示例的目的，将需要语法调整实际工作)：
var height = document.getElementById("head").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';
这样的东西应该会让你渲染的固定< div>并相应地设置内容< div>的margin。您还需要在固定的< div>上显式设置背景颜色，否则滚动时内容会显示为固定的。
