html - div 的最小高度 100%

Question

我正在尝试为这种布局找到一个简单的解决方案。这是简化的 html。

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

页眉和页脚具有固定的像素高度。中间可以有一个可变的高度，这取决于内容。我希望 wrapper 的最小高度为 100%。所以如果中间的文本很小，中间的 div 应该扩展以填充浏览器页面。如果太长，整个页面应该是可滚动的。

这容易吗？也许改变布局中的某些东西？

Answer 1

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

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

有了页眉和页脚，您也不希望在您的 .middle 类中使用 height: 100%，因为它会将您的页脚向下推，迫使滚动条不显示有什么关系。您也不想要一个明确的height:100%，因为大多数浏览器会将其解释为浏览器高度的 100%，因此当您将浏览器调整为更大，要么高度不会改变，要么页脚不会移动。

此处最好的解决方案是将您的 wrapper 和任何关联的背景附加到该 wrapper 上。根据您的 .middle div 中的内容，这个答案可能会改变，但考虑到简单的参数，这是最优雅的方法。

秘诀是确保所有包含的元素都设置了高度。原因是，任何具有 height: 100% 的 block 元素都只会是包含它的区域的 100%。在这种情况下，您需要为 middle、wrapper 和 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; }

如果您在 .middle 中有嵌套内容，并且还需要 100% 高度，则有更好的方法，即结合使用高度、绝对定位和负边距。给猫剥皮的方法有一百万种。好吧，至少有几个:)

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