使用 css 和固定 header 和页脚的可变内容 div 高度

Question

我在使用 CSS 时遇到了一些麻烦，我正在向这个很棒的社区寻求帮助。

我正在尝试构建包含以下元素的布局：

1) A header 区域 2) 页脚区域 3) 左侧窗格 4) 内容区域

我想出了以下 CSS，但我不相信这是做我需要的最佳方式。

请在下面找到我正在寻找的图片以及所有详细信息。 此外，下面是我当前的 CSS 和 html。

CSS：

* {
    margin: 0;
}

html, body {
   height: 100%;
   overflow: hidden;
        }

#wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px; 
}

#leftbar {
   float: left;
   width: 350px;
   background-color: #EAEAEA;
   height: 100%;
   position: absolute;
   z-index: -1;
}

#rightbar {
}

#footer {
   height: 100px;            
}               

#header {
   height: 100px;
}   

HTML：

<div id="wrapper">
    <div id="header">   </div>
        <div id="content">
            <div id="leftbar">  </div>
            <div id="rightbar"> </div>
        </div>
</div>
<div id="footer">  </div>                                                                          

所需布局：

请注意，虽然我不介意使用 jQuery 和 javascript 来完成此操作，但我想避免它。

任何帮助将不胜感激。

谢谢！

Answer 1

这个小提琴符合你的要求吗？ 我无法确定您是否希望页脚始终位于页面底部。

---

更新

这个小提琴的页脚总是在底部。

Answer 2

一个常见的问题。 如果您在此处找不到合适的布局，则它不存在。

Answer 3

A List Apart 上的In Search of the Holy Grail文章提供了符合您描述的三列布局。 我建议您看一下这篇文章并完全省略#right列。

Answer 4

使用table或display: table-cell用于必须具有相同高度的内容。

[编辑]带有表格的三列布局在几分钟内完成，并且可以正常工作。

所有这些使用浮动 div 的 hack 只会创建有时有效有时会失败的脆弱布局。 它们很难调试，很难正确，并且需要大量的 CSS styles 和 HTML 代码。 为了一点回报。 因此，如果您想浪费几天时间让它工作，请务必使用浮动div 。

有人说“桌子不好”不是我的错。 这就像在说“太阳很糟糕，因为它会灼伤你”。 好吧，适当地使用它。