固定顶部和底部,可变高度中间的CSS布局

Question

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

的顶部和底部被固定的div.它们位于浏览器窗口的顶部和底部.我希望中间部分填充顶部和底部div之间的窗口的其余部分.

如果它的内容超过它的高度,那么我可以使用滚动条.但它的大小不应超过窗口.

我的CSS和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>

从这里,页脚显示在底部,但内容div仍然填充整个窗口,应该是[窗口 - 页脚]高度.

Answer 1

使用绝对定位定位中间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>

使用"整页"选项正确查看代码段.

Answer 2

如果您不知道页眉或页脚大小并且可以使用 CSS3，那么我建议您使用 flexbox 布局。

下面的示例（或检查小提琴）

HTML：

<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">bottom</div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 400px;
}

.header {
  flex-grow: 0;
  background-color: red;
}
.content {
  flex-grow: 1;
  background-color: green;
}
.footer {
  flex-grow: 0;
  background-color: blue;
}

Answer 3

HTML

<div id="main">
<div id="header"> Header Content</div>    
<div id="content">
    <ul><li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>
        <li>Hello World!!! </li>           
        </ul>
</div>
<div id="footer">I am Footer
</div>

CSS

      body { margin: 0;}
#main{
   position: absolute;
   width: 100%;
   top: 0;
   bottom: 0;}
#header
{
position: absolute;
height: 41px;
top: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
#content
{
    position: absolute;
    top: 41px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow:scroll;               
}
#footer
{
      position: absolute;
      height: 41px;
      bottom: 0;
      left: 0;
      right: 0;
      text-align:center;
      display:block;
      background: blue;
}

li{
    text-decoration: none;
    display: block;
    height: 20px;
    width: 100%;
    padding: 20px;

}

JSFIDDLE演示