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

Question

我的情况如下例所示（参见chrome）： http://jsfiddle.net/3fLP6/49/

有div行包含一些内容，一个div包含可变内容，应填充剩余的可用高度。在Chrome / Firefox / Safari / Android / iOS中一切正常但我找不到IE的解决方案（我需要IE7 +的解决方案）还有其他方法可以在IE中实现这个吗？

Answer 1

我认为你的意思是你想要一个总是位于顶部的页眉，一个总是位于底部的页脚，以及一个填充其余可用空间的div;无论其内容有多小或多大。我在答案的其余部分使用这些术语。

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

1. 使用position: fixed CSS属性定位页眉，页脚和正文。这意味着您必须将标题设置为0像素的顶部位置，并将页脚设置为0像素的底部位置。此外，您必须将正文div的顶部和底部属性分别设置为页眉和页脚的高度。因此，此方法要求您知道页眉和页脚的确切高度。不幸的是，一些较旧的浏览器（例如IE6）不支持position: fixed，因此如果对这些浏览器的支持很重要，则应该使用其他选项之一;
2. 使用百分比指定所有div的高度。显然，这很容易。但是，如果要为页眉和页脚设置特定高度，则无法实现;
3. 您还可以创建一个div宽度，高度为100％，将作为正文div。最重要的是，您使用div定位页眉和页脚position: absolute（因此，这也适用于较旧的浏览器）。然后，向body元素添加另外两个元素：顶部一个div，底部一个div。这些div必须分别与页眉和页脚的高度相同，因为这两个元素将确保在必要时显示滚动条。当然，您需要在正文overflow: auto;
上设置div
4. 最后，您还可以在调整窗口大小时使用JavaScript更改正文div的高度。这种方法的一大缺点是需要JavaScript，因此这不是我的选择。

我希望我帮助过。如果我不清楚（足够），请询问任何问题。