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

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>

我已经在这类问题上找到了很多变化,比如这个问题,但是还没有能够让任何答案对我有用.

Answer 1

方法1 - flexbox

它适用于已知和未知的高度元素.确保设置外股利height: 100%;和重置默认margin的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

Answer 2

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