CSS如何获得页眉和页脚之间的高度？答案

【问题标题】：CSS How to get height between header and footer?CSS如何获得页眉和页脚之间的高度？
【发布时间】：2009-09-23 11:44:00
【问题描述】：

我有一个高度始终为 100% 的网站。页眉和页脚始终具有固定的高度。首先是一些代码：

CSS

#header { height: 50px; }
#footer { position: absolute; bottom: 0px; height: 20px; }

HTML

<!-- in the body tag -->
<div id="header">Header</div>
<div id="content-Left"></div>
<div id="content-Right"></div>
<div id="footer"></div>

编辑：如您所见，我在页眉和页脚之间有一个 div 内容（左右）。我希望这些 div 填满页眉和页脚之间的所有空间。 content-left div 必须始终显示从页眉到页脚的右边框。我该怎么做？

【问题讨论】：

标签： css

【解决方案1】：

我建议这样解决：

#header {
       position: fixed;
       top: 0px;
       left: 0px;
       width: 100%;
       height: 50px;
       }

#footer {
       position: fixed;
       bottom: 0px;
       left: 0px;
       width: 100%;
       height: 20px;
       }

#content-Left {
       position: fixed;
       top: 50px; /* Close to the Header */
       bottom: 20px; /* Scales the Div down upon the Footer */
       left: 0px; /* Position it to the left */
       width: 50%;
       overflow: auto; /* Makes the Content scrollable if its required */
       border-right: 1px solid #000000;
       /* Border as required - just change size,type and color as you want */
       }

#content-Right {
       position: fixed;
       top: 50px; /* Close to the Header */
       right: 0px; /* Position it to the right */
       bottom: 20px; /* Scales the Div down upon the Footer */
       width: 50%;
       overflow: auto; /* Makes the Content scrollable if its required */
       }

【讨论】：

我已经编辑了我的帖子。我不希望我的页面滚动。 content-right div 会溢出。
请在上面找到我编辑的css代码。该解决方案确实模拟了“框架”布局。我个人不建议创建这样的布局，因为当用户更改窗口大小时内容不可见。
是的，这是我必须解决的另一个方面。您将如何避免这个问题但仍然保持概念？
这取决于项目的问题 - 总是看到页眉和页脚的原因是什么？如果内容会强制滚动，为什么不滚动？根据窗口大小和用户桌面分辨率，该布局有很多解决方法。
我正在开发更多的应用程序而不是网站。出于这个原因，我希望页眉和页脚可见

【解决方案2】：

固定页脚，没有 javascript，对吧？

将所有内容包装在<div id="container"></div> 中。在你的 CSS 中：

*, body {margin: 0; padding: 0;} 
#container {display: block; position: absolute; min-height: 100%;} 
#content-Left {border-right: 1px solid #000; } 
#footer {position: absolute; display: block; bottom: 0; height: 3em }

如果您已经有 IE6 样式表，请添加：

body, #container {height: 100%;}

如果没有，请创建一个，否则将其添加到 HTML 文档的头部：

<!--[if lt IE 7]> <style>body, #container {height: 100%;}</style> <![endif]-->

应该做的伎俩。

【讨论】：