logo标签列表

固定页眉和页脚的可滚动内容

htmlcss
16

我试图创建一个页面，包含三个div：页眉、页脚和内容区域。它们应该占据整个屏幕。

页眉和页脚很小，不会改变大小，内容区域可以是任何大小，因此我添加了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>

我发现了很多类似的问题，比如这个问题，但是我没有能够让任何答案对我起作用。

你需要在带有overflow属性的div中指定一个高度设置。 - Liquidchrome
@Liquidchrome 我不知道高度是多少...只要能够显示内容就行。 - Michael
嗯...你可以按照主容器高度的百分比设置每个div的百分比来设置高度，但这会使得页眉和页脚在用户屏幕上的像素大小不同。https://jsfiddle.net/tdxn1e7p/2/ - Liquidchrome
这个回答解决了你的问题吗？固定页眉、页脚并带有可滚动内容 - Drew Reese
4个回答
42

方法1- flexbox

这个方法适用于已知和未知高度的元素。请确保将外部div设置为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>

方法二 - 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>

方法三 - 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标签作为包装器，这是一种直接且响应式的方法...真的很酷，谢谢！ - Mark Dalsaso
6
在Bootstrap 4.0中，如果要实现头部和底部固定，内容可滚动的效果，将所有内容包裹在.container-fluid中，使用.fixed-top和.fixed-bottom类分别添加到头部和底部的div中。当然，需要足够多的内容（溢出），才能看到它们滚动。
1

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

0

overflow: auto适用于元素内部的内容。但是该div当前具有流体高度，因此其内容永远不会溢出。

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

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

这将使 div 占据页面高度的 80%，但不会超过此高度。然后，您可能还应该将 body 设置为 overflow: hidden 来处理边距：更新演示。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接