我可以在本身为 100% 高度的 DIV 中拥有 100% 的高度吗？

Question

我有一个基本的网站结构：

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

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

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

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

Answer 1

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

这是working jsfiddle。