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

Question

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

页眉和页脚很小并且不会改变，内容区域可以是任意大小，所以我添加了 overflow:auto 使其在变得太大时滚动。

问题是，它溢出了屏幕的高度。我创建了一个小提琴来演示： https ://jsfiddle.net/tdxn1e7p/

我正在使用以下 CSS 设置 html 和 body 高度，因此容器上的 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>

我发现了很多关于此类问题的变体，例如 这个问题，但无法使任何答案对我有用。

原文由 Michael 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

方法 1 - flexbox

它适用于已知和未知的高度元素。确保将外部 div 设置为 height: 100%; 并重置默认值 margin on body 。请参阅 浏览器支持表。

jsFiddle

 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 在内的旧版浏览器。

jsFiddle

 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() 。

jsFiddle

 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>

jsFiddle

原文由 Stickers 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 Bootstrap 4.0 中，要有一个带有滚动内容的固定页眉和页脚，请将所有内容包装在 .container-fluid 中，就像你可能做的那样。在页眉和页脚 div 中使用 .fixed-top 和 fixed-bottom 类。当然，你必须有足够的内容（溢出）才能看到它滚动。

原文由 Jack Mason 发布，翻译遵循 CC BY-SA 3.0 许可协议