粘滞的页眉和页脚可滚动内容

时间：2016-06-17 17:57:14

标签： html css css3

我尝试创建一个包含三个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，但我们无法让任何答案适合我。

4 个答案:

答案 0 :(得分：21)

方法1 - flexbox

它适用于已知和未知的高度元素。确保将外部div设置为height: 100%;并重置margin上的默认body。请参阅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

答案 1 :(得分：2)

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

答案 2 :(得分：0)

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

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

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

这将使div占用页面高度的80％，但绝不会超过该高度。然后你可能还应该将正文设置为overflow: hidden来处理边距：Updated demo。

答案 3 :(得分：0)

@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>

相关问题
最新问题