Question

我正在尝试为此布局提供一个简单的解决方案。这是简化的html。

<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>

页眉和页脚具有固定的高度（以像素为单位）。中间可以有一个可变高度，具体取决于内容。我希望包装的最小高度为100％。因此，如果中间的文本很小，则中间div应该展开以填充浏览器页面。如果它太长，整页应该是可滚动的。

这可能很容易吗？也许在布局中改变一些东西？

Answer 1

这是您的解决方案：http://jsfiddle.net/S4akv/1/

您不想为.middle设置硬高度。如果您的内容只有几行，那么您最终会得到不需要的滚动条。

使用页眉和页脚，您也不希望height: 100%类.middle，因为它会推动您的页脚，无论如何都会强制滚动条。您还不想要明确height:100%，因为大多数浏览器会将此解释为浏览器高度的100％，因此当您将浏览器调整为更大时，要么获得高度不会改变或页脚不会移动。

这里最好的解决方案是将您的包装器和任何关联背景附加到其上。根据{{1}} div中的内容，这个答案可能会发生变化，但考虑到简单的参数，这是最优雅的方法。

秘诀是确保所有包含元素的高度都设置了。原因是，.middle的任何块元素只是包含它的区域的100％。在这种情况下，您需要为中间，包装器和height: 100%

设置高度

body, html

如果您在body,html { height: 100%; margin:0; padding:0; } .wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; } .header { height: 200px; width: 100%; background-color: blue; } .middle { } .footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }内的嵌套内容也需要100％高度，那么使用高度，绝对定位和负边距的组合会有更好的方法。有一百万种皮肤猫的方法。好吧，至少少数：）

编辑

以向.middle添加填充以腾出页脚空间。包装器的底部填充必须与页脚的高度相同

div的最小高度为100％

1 个答案: