CSS布局具有固定的顶部和底部，可变高度中间 [英] CSS layout with fixed top and bottom, variable height middle

问题描述

  + ------------------- + 
 |顶部（固定）| 
 + ------------------- + 
 | | 
 | | 
 |中间（填充）| 
 | | 
 | | 
 + ------------------- + 
 |底部（固定）| 
 + ------------------- + 
  

$ b b

顶部和底部是固定的div。它们位于浏览器窗口的顶部和底部。我想让中间部分填充顶部和底部div之间的窗口的其余部分。

如果它的内容超过其高度，可以使用滚动条。但其大小不应超过窗口。

我的CSS和HTML：

  html，body，#main {height：100％;}＃content {background：＃F63;宽度：100％; overflow：auto;高度：100％; margin-bottom：-100px;}＃footer {position：fixed;显示：block; height：100px; background：#abcdef; width：100％;}  

 < div id = main> < div id =content> xyz< / div> < div id =footer> abc< / div>< / div>  

从这里，页脚显示在底部，但内容div仍然填充整个窗口，应该是[window-footer] height。

解决方案

使用绝对定位定位中间div而不指定高度。它不会比这更简单：

  #header {position：fixed; top：0; left：0; right：0; height：100px; background-color：#abcdef;}＃footer {position：fixed; bottom：0; left：0; right：0; height：100px; background-color：#abcdef;}＃content {position：fixed; top：100px; bottom：100px; left：0; right：0; background-color：＃F63; overflow：auto;}  

 < div id =header >< / div>< div id =content>< / div>< div id =footer>< / div>  p> 

使用全页选项正确查看代码段。

+-------------------+
|    Top (fixed)    |
+-------------------+
|                   |
|                   |
|   Middle (fill)   |
|                   |
|                   |
+-------------------+
|   Bottom (fixed)  |
+-------------------+

The top and bottom are fixed divs. They are positioned on the top and bottom of browser window. I want the middle part to fill the rest of the window between top and bottom divs.

If it's content is more than its height then i can use scrollbars. But its size should not exceed the window.

My CSS and HTML:

html, body, #main
{
  height: 100%;
}
#content
{
  background: #F63;
  width: 100%;
  overflow: auto;
  height: 100%;
  margin-bottom: -100px;
}
#footer
{
  position: fixed;
  display: block;
  height: 100px;
  background: #abcdef;
  width: 100%;
}

<div id="main">
  <div id="content">xyz</div>
  <div id="footer">abc</div>
</div>

From this, the Footer shows in the bottom but, the Content div still fills the whole window which should have been [window-footer] height.

解决方案

Position the middle div using absolute positioning without specifying height. It does not get much simpler than this:

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}
#content {
    position: fixed;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
    background-color: #F63;
    overflow: auto;
}

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

Use "Full page" option to view the snippet properly.

这篇关于CSS布局具有固定的顶部和底部，可变高度中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！