0

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

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

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

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

4

1 回答 1

2

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

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

使用页眉和页脚，您也不希望height: 100%在您的.middle课程上，因为它会将您的页脚向下推，无论如何都会强制滚动条。您也不希望明确，height:100%因为大多数浏览器会将其解释为浏览器高度的 100%，因此当您将浏览器调整为更大时，高度不会改变或页脚不会移动。

这里最好的解决方案是让你的包装器和任何相关的背景附加到它上面。根据.middlediv 中的内容，这个答案可能会改变，但考虑到简单的参数，这是最优雅的方法。

秘诀是确保所有包含的元素都设置了高度。原因是，任何块元素height: 100%都只会是包含它的区域的 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; }

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

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

于 2012-06-15T23:03:27.173 回答