如何在没有“位置：绝对；”的情况下使 DIV 填充页面？答案

【问题标题】：How do I make a DIV fill the page, without "position: absolute;"?如何在没有“位置：绝对；”的情况下使 DIV 填充页面？
【发布时间】：2013-01-05 17:32:44
【问题描述】：

我正在尝试设计一个包含几个页眉、一些主要内容和一个页脚的页面布局。

我想在主要内容中使用带有边框的 jQuery UI 选项卡小部件，因此 div 必须填充页眉和页脚之间的所有空间，但我还希望内容在需要时从底部展开屏幕和滚动条出现，因此我可以向下滚动并查看它。

实际上，我希望内容 div 的最小高度是页眉和页脚之间的距离，但允许它扩大。

I've implemented Sticky Footer 方法，如果我不希望我的主要内容周围有边框，它会非常有效。在这个jsFiddle 示例中，带有红色 2px 边框的 div 最初需要填充页面，当您单击“添加东西”按钮添加更多内容时，它需要向下推页脚并显示滚动条。

这就是我想要实现的目标：

...遵循这些规则：

我试过了：

【问题讨论】：

【解决方案1】：

好吧，您可以只测量页眉和页脚之间的实际距离，然后将最小高度设置为精确的 px。

例如，之间的距离是600px，

然后设置

min-height:600px;
height:100%

这样，当您的内容适合最小高度时，例如。 600px 那么高度应该是 600px，现在当内容被添加并且超出 600px 的高度时，容器 div 会在高度上拉长以容纳被 height:100% 覆盖的添加内容； .

是的，你可以使用“Measure It”（它是一个 chrome/firefox 扩展）来实时测量屏幕上的距离，它更方便。

希望这会有所帮助，这是 jsfiddle http://jsfiddle.net/Atjxc/11/

【讨论】：

好主意，但我如何考虑不同分辨率、显示器尺寸和浏览器窗口尺寸的用户？
看我不会费心比这更深入（实际上对此感到抱歉），但是为了您的帮助，我可能希望向您指出这个问题 [link]stackoverflow.com/questions/1271675/… 这应该足够了，然后您可以根据 {vertical screen res~ - (header height + Footer height)} 更改 'min-height' 属性的值。

【解决方案2】：

我能想到的最好的方法是http://jsfiddle.net/Atjxc/6/

因为窗口的高度是可变的，我不得不只使用百分比，以及绝对定位。

.foo { overflow-y:scroll; position:absolute; left:0; top:10%;
width:100%; height:85%; }
.footer{ background:#ffc; position:absolute; bottom:0;}

我为主要部分添加了一个容器，当内容过长时它会显示一个滚动条。我无法设置边框，因为它们必须设置为 px 值，这会弄乱我基于百分比的高度。

【讨论】：