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

我有一个总是有100％高度的网站。页眉和页脚总是有一个固定的高度。首先是一些代码：CSS如何获得页眉和页脚之间的高度？

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填充页眉和页脚之间的所有空间。内容左侧div必须始终显示从页眉到页脚的右侧边框。我怎样才能做到这一点？

来源

2009-09-23 Martijn

我建议解决这个问题这样的：

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

来源

2009-09-23 11:55:03 wildhaber

我编辑了我的帖子。我不想让我的页面滚动。内容正确的div会溢出。上面的 – Martijn 2009-09-23 12:02:12

请找到我编辑的CSS代码。这个解决方案确实模拟了一个“框架” - 布局。我个人不建议创建这样的布局，因为当用户改变窗口大小时，内容不可见。 – wildhaber 2009-09-23 12:16:17

是的，这是我必须解决的另一方面。你如何避免这个问题，但仍然保持概念？ – Martijn 2009-09-23 12:19:26

固定页脚，没有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]-->

应该这样做。

来源

2009-09-23 18:01:28 rhodesjason

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

回答

相关问题