Question

我的网站总高度为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必须始终显示从页眉到页脚的右边框。我怎么能这样做？

Answer 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 */
       }

Answer 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]-->

应该做的伎俩。

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

2 个答案: