我可以在DIV中拥有100％高度，这个高度本身就是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。