相对于同级 div 偏移的堆叠 div
Posted
技术标签:
【中文标题】相对于同级 div 偏移的堆叠 div【英文标题】：Stacked divs with offsets relative to sibling divs 【发布时间】：2012-03-10 09:06:09 【问题描述】：我有一个覆盖整个屏幕高度的 div。我想在其中放置三个 div：页眉、内容和页脚，页眉贴在顶部，页脚贴在底部，内容介于两者之间。我找到的解决方案需要我为页脚和/或页眉定义一个高度，然后给中心 div 一个等于该高度的边距，我想保留未定义的高度（它们应该拉伸以适应它们的内容）。有没有办法在不使用 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>
【问题讨论】：
您需要支持哪些浏览器？ 如果我调整浏览器大小会发生什么？他们都缩小了吗？还是保持大小？ @bazmegakapa 当然！ (IE 6+) 仅限 CSS，我认为这是不可能的。你必须至少在其中一些（如页眉和页脚）上设置一个明确的高度 @Joseph 如果我为页脚设置 px 高度，我该怎么做？ 【参考方案1】：最简单的方法是在包装器上使用display:table，在div 部分使用display:table-row，但是像往常一样，跛脚鸭IE 7 不支持它，所以只需使用实际的<table>。是的，这不是语义，但这确实是一个小小的权衡。
【讨论】：
我认为这可能是唯一的方法，但这也给我在 IE 中带来了问题。我在桌子上尝试了stretchedToMargin 类，但没有奏效，所以我给桌子100% 的高度，这有效。然后我创建了 3 行，最后一行的高度为 100px。然后我放了一个高度为 100% 的 div 并溢出：auto;在中间行内，并且在 chrome 中有效，但在 IE 8 中，div 不会溢出。你能帮忙解决这个问题吗？ 首先，你还没有关闭你的div。其次，相对尺寸和溢出并不总是像您期望的那样对表格单元格的子元素起作用（正确的行为实际上在 CSS 标准中是未定义的）所以只需完全删除 div，因为它似乎没有提供任何真正的服务目的。
对不起，没关系。我刚刚意识到您希望中心滚动。您的问题是单元格的高度由其内容的高度定义，但您要求内容由单元格的高度定义。这是标准并未试图解决的先有鸡还是先有蛋的矛盾。
...话虽如此，您可能想在 100% 高的父级中尝试一个额外的嵌套 div 并尝试对其进行溢出。
那也行不通。看起来当我做 100% 高度时，浏览器将其解释为表格的 100%，而不是单元格。叹息以上是关于相对于同级 div 偏移的堆叠 div的主要内容，如果未能解决你的问题，请参考以下文章