我有一个 div 可以拉伸(stretch)整个屏幕的高度。我想在其中放置三个 div:页眉、内容和页脚，页眉贴在顶部，页脚贴在底部，内容介于两者之间。我发现这样做的解决方案要求我为页脚和/或页眉定义一个高度，然后给中心 div 一个等于该高度的边距，我想保留未定义的高度(它们应该拉伸(stretch)以适合它们内容)。有没有办法不使用 javascript 来做到这一点？
当浏览器调整大小时，页脚和页眉应该保持不变，而中心应该缩小。
<html>
<head>
<style>
.stretchedToMargin {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
background-color: green;
}
</style>
</head>
<body>
<div class="stretchedToMargin">
<div>
Header (style="top:0") Indefinite height.
expands to fit content without scrolling.
</div>
<div>
Content
Fits between header and footer, using the pixels leftover
scrolling if needed
</div>
<div>Footer (style="bottom:0") Indefinite height.
expands to fit content without scrolling.
</div>
</div>
</body>
</html>
按如下方式使用表格(因为看起来这仅用 CSS 是不可能的)也不起作用。长文本溢出整个布局，没有出现滚动条...
<div class="stretchedToMargin">
<table style="height:100%;">
<tr>
<td style="height:1px;">Header</td>
</tr>
<tr>
<td><div style="height:100%; overflow:auto;">...Long text...</div></td>
</tr>
<tr>
<td style="height:100px">Footer</td>
</tr>
</table>
</div>
最佳答案
最简单的方法是使用display:table在 wrapper 上和 display:table-row在 divs 部分，但是像往常一样，跛脚鸭 IE 7 不支持它，所以只需使用实际的 <table> .是的，这不是语义，但这确实是一个小的权衡。
关于html - 相对于同级 div 具有偏移量的堆叠 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9354110/