Html 基于Div和CSS的固定/非固定高度容器解决方案

我遇到了如下示例中的情况（参见chrome）：

---

有一些div行包含一些内容，还有一个div行包含可变内容，这些内容将填充剩余的可用高度。在Chrome/Firefox/Safari/Android/iOS中一切都很好，但我找不到IE的解决方案（我需要IE7+的解决方案）在IE中有没有其他方法来完成这一点？

我想你的意思是你想要一个始终位于顶部的页眉，一个始终位于底部的页脚，以及一个填充剩余可用空间的div；无论内容有多小或多大。我在剩下的回答中使用了这些术语

据我所知，在IE7+中有三种方法可以做到这一点：

使用

position:fixed

CSS属性定位页眉、页脚和正文。这意味着您必须将页眉设置为0像素的顶部位置，将页脚设置为0像素的底部位置。此外，必须将body

div

的top和bottom属性分别设置为页眉和页脚的高度。因此，此方法要求您知道页眉和页脚的确切高度。不幸的是，一些较旧的浏览器（如IE6）不支持

位置：fixed

，因此如果对这些浏览器的支持很重要，您应该选择其他选项之一

使用百分比指定所有

div

的高度。显然，这很容易。但是，如果要为页眉和页脚设置特定高度，则不可能

您还可以创建一个宽度为100%的

div

宽度，作为主体

div

。除此之外，您还可以使用

position:absolute

定位页眉和页脚

div

（因此，这也适用于较旧的浏览器）。然后，将另外两个元素添加到body元素中：一个位于顶部的

div

，一个位于底部的

div

。这些

div

必须分别与页眉和页脚的高度相同，因为这两个元素将确保在必要时显示滚动条。当然，您需要在body

div

上设置

overflow:auto

最后，在调整窗口大小时，还可以使用JavaScript更改主体的高度

div

。这种方法的一大缺点是需要JavaScript，因此这不是我的选择

---

我希望我能帮忙。如果我不清楚，请问我任何问题。

仅通过CSS是不可能的MM，在Chrome和其他现代浏览器中也是可能的，这就是为什么我认为它应该是解决问题的某种方法IE@Irek以前的经历会让你产生这个愚蠢的想法吗？；-）