粘性页眉和页脚可滚动内容

Question

我正在尝试创建一个包含三个div的页面：页眉，页脚和内容区域。这些应该占据屏幕的100％。

页眉和页脚很小，不会改变，内容区域可以是任何大小，因此我添加overflow:auto了使其变大时滚动的功能。

我正在使用以下CSS设置html和正文高度，因此容器上的height:100%技巧将起作用：

html, 
body {
    height: 100%;
}

我的文档结构为：

<div style="height:100%;">
  <div>
    Header content
  </div>
  <div style="overflow:auto;">
    Body content... this could be very long
  </div>
  <div>
    Footer content
  </div>
</div>

Answer 1

方法1-Flexbox

它适用于已知和未知的高度元素。确保设置外股利height:100%;和重置默认margin的body。

html, body {

  height: 100%;

  margin: 0;

}

.wrapper {

  height: 100%;

  display: flex;

  flex-direction: column;

}

.header, .footer {

  background: silver;

}

.content {

  flex: 1;

  overflow: auto;

  background: pink;

}


<div class="wrapper">

  <div class="header">Header</div>

  <div class="content">

    <div style="height:1000px;">Content</div>

  </div>

  <div class="footer">Footer</div>

</div>

方法2-CSS表

对于已知和未知高度元素。它也可以在包括IE8在内的旧版浏览器中使用。

html, body {

  height: 100%;

  margin: 0;

}

.wrapper {

  height: 100%;

  width: 100%;

  display: table;

}

.header, .content, .footer {

  display: table-row;

}

.header, .footer {

  background: silver;

}

.inner {

  display: table-cell;

}

.content .inner {

  height: 100%;

  position: relative;

  background: pink;

}

.scrollable {

  position: absolute;

  left: 0; right: 0;

  top: 0; bottom: 0;

  overflow: auto;

}


<div class="wrapper">

  <div class="header">

    <div class="inner">Header</div>

  </div>

  <div class="content">

    <div class="inner">

      <div class="scrollable">

        <div style="height:1000px;">Content</div>

      </div>

    </div>

  </div>

  <div class="footer">

    <div class="inner">Footer</div>

  </div>

</div>

方法3- calc()

如果页眉和页脚固定高度，则可以使用CSS calc()

html, body {

  height: 100%;

  margin: 0;

}

.wrapper {

  height: 100%;

}

.header, .footer {

  height: 50px;

  background: silver;

}

.content {

  height: calc(100% - 100px);

  overflow: auto;

  background: pink;

}


<div class="wrapper">

  <div class="header">Header</div>

  <div class="content">

    <div style="height:1000px;">Content</div>

  </div>

  <div class="footer">Footer</div>

</div>

方法4-所有百分比

如果页眉和页脚的高度已知，并且它们也是百分比，则只需执行简单的数学运算即可将它们的高度设为100％。

html, body {

  height: 100%;

  margin: 0;

}

.wrapper {

  height: 100%;

}

.header, .footer {

  height: 10%;

  background: silver;

}

.content {

  height: 80%;

  overflow: auto;

  background: pink;

}


<div class="wrapper">

  <div class="header">Header</div>

  <div class="content">

    <div style="height:1000px;">Content</div>

  </div>

  <div class="footer">Footer</div>

</div>