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

2024-07-04

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

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

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

我使用以下 CSS 来设置 html 和 body 高度，因此height:100% trick https://stackoverflow.com/q/6654958/483779在容器上将起作用：

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>

我发现这类问题有很多变体，例如这个问题 https://stackoverflow.com/q/2174311/483779，但无法使任何答案对我有用。

方法 1 - 弹性盒

它对于已知和未知的高度元素都非常有效。确保将外部 div 设置为height: 100%;并重置默认值margin on body。请参阅浏览器支持表 http://caniuse.com/#feat=flexbox.

jsFiddle https://jsfiddle.net/2kh20Lsz/

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 https://jsfiddle.net/6x6t02ke/

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

如果页眉和页脚是固定高度，则可以使用CSScalc() http://caniuse.com/#feat=calc.

jsFiddle https://jsfiddle.net/ao8jqabh/

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 https://jsfiddle.net/kqhj2s3p/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css