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

Question

我在使用CSS方面遇到了一些麻烦，我正在寻求这个精彩社区的帮助。

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

1）标题区域 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

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

---

更新

This fiddle页脚始终位于底部。

Answer 2

一个常见的问题。如果找不到合适的布局here则不存在。

Answer 3

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

Answer 4

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

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

所有那些使用浮动div的黑客只会创建脆弱的布局，有时会工作，有时会失败。它们很难调试，很难正确，需要大量的CSS样式和HTML代码。回报很少。因此，如果您想浪费几天时间来使其工作，请务必使用浮动div。

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