css - 我可以在本身为 100% 高度的 DIV 中设置 100% 高度吗？

Question

我有一个基本的网站结构，它有:

1. 位于屏幕顶部的 Header div
2. 两个用于导航的 Sidebar div，它们在屏幕左右浮动
3. 位于侧边栏中间的 Content div(没有 float ，它的左右边距与侧边栏的宽度相同，以便清除它们)
4. 位于屏幕底部的 Footer div(使用绝对定位固定在适当的位置)

我可以 100% 填充 Header 和 Footer 之间的空间吗？我希望我的 Sidebars 和 Content 填充页眉和页脚之间剩余的高度空间。如果其中的内容超过屏幕的高度，我也希望内容区域有一个垂直滚动条。

到目前为止，我只设法分别在顶部和底部修复了 Header 和 Footer。我还将 Sidebar float 到屏幕的左侧和右侧，并将 Content div float 在中间。它们都可以工作，但我的边栏和内容 div 不是剩余屏幕空间的完整高度。

我在这里启动了一个 JSFiddle，但它不能正常工作:http://jsfiddle.net/6YSuc

Answer 1

您需要将position: relative 分配给您的元素，这样它们就不会相互重叠。此外，将 height: 100% 分配给父元素也有帮助。

这是一个 working jsfiddle .