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

【问题标题】：Sticky header and footer scrollable content粘性页眉和页脚可滚动内容
【发布时间】：2016-06-17 17:57:13
【问题描述】：

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

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

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

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

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>

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

【问题讨论】：

你需要在溢出的div上指定一个高度设置
@Liquidchrome 我不知道高度是多少......显示内容需要什么。
嗯...您可以通过主容器的高度百分比来设置每个 div 的百分比来设置高度，但这会使页眉页脚的像素大小不同，具体取决于用户的屏幕。 jsfiddle.net/tdxn1e7p/2

标签： html css

【解决方案1】：

方法 1 - 弹性盒

它适用于已知和未知的高度元素。确保将外部 div 设置为 height: 100%; 并在 body 上重置默认的 margin。请参阅browser support tables。

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

【讨论】：

Flexbox 方法效果很好。我使用body标签作为包装；一种直截了当且响应迅速的方法...真的很酷 thx！

【解决方案2】：

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

【讨论】：

【解决方案3】：

@Sticker 的 flexbox 方法效果很好。对于那些使用 Bootstrap 4 的人，您可以避免使用自定义 CSS：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<html class="h-100">
  <body class="h-100">
    <div class="wrapper d-flex flex-column h-100">
      <div class="header">Header</div>
      <div class="content flex-grow-1 overflow-auto">
        <div style="height:1000px;">Content</div>
      </div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

【讨论】：

【解决方案4】：

overflow: auto 应用于元素内部的内容。但是 div 目前有一个流动的高度，所以它的内容永远不会溢出它。

如果希望内容 div 滚动而不是溢出页面，则需要为其添加最大高度，例如

<div style="max-height: 80%;">

这将使 div 占据页面高度的 80%，但不会超过该高度。那么您可能还应该将正文设置为overflow: hidden 以处理边距：Updated demo。

【讨论】：

方法 1 - 弹性盒

方法 2 - CSS 表格

方法 3 - calc()

方法 4 - 所有人的百分比

方法 3 - `calc()`