时间戳

首页 > 解决方案 > 带有粘性页眉和页脚以及可滚动内容的嵌套 DIV

html - 带有粘性页眉和页脚以及可滚动内容的嵌套 DIV

问题描述

我有一个复杂的 html 页面，对于某个 div，我需要它有一个粘性页眉和页脚以及可滚动的内容。我在整个页面上找到了有关如何执行此操作的示例，但它不适用于任意 div。

这是我对我的情况的简化版本的尝试

/* Required */
body {
  margin: 0;
  height: 100%;
}

#wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 30px 1fr 30px;
}

#content {
  overflow-y: scroll;
}

/* Optional */
#wrapper > * {
  padding: 5px;
}

#header {
  background-color: #ff0000ff;
}

#content {
  background-color: #00ff00ff;
}

#footer {
  background-color: #0000ffff;
}

.app-wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 64px 1fr;
}

.sub-header {
  background: yellowgreen;
}


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="app-wrapper">
  <div class="sub-header">
    Some content here
  </div>
  <div id="wrapper">
    <div id="header">Header Content</div>
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
      <p>asdfasdfasdfasfasdfasdfasdfasfasdf</p>
    </div>
    <div id="footer">Footer Content</div>
  </div>
</div>
</body>
</html>

结果我得到了2个滚动条 在此处输入图像描述

如果我添加overflow: hidden，.app-wrapper那么我不再看到我的 div 中的页脚。

我该如何很好地解决这个问题？

标签： htmlcssflexbox

解决方案

overflow: hidden隐藏了 div 代表的所有内容，这就是为什么当你把它放在.app-wrapper上时你看不到页脚的结尾。但是，如果您只能隐藏滚动条，您将松了一口气。所以这就是我所做的；


body {
  margin: 0;
  height: 100%;
}

#wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 30px 1fr 30px;
}

#content {
  overflow-y: scroll;
}

/* Optional */
#wrapper > * {
  padding: 5px;
}

#header {
  background-color: #ff0000ff;
}

#content {
  background-color: #00ff00ff;
}

#footer {
  position:sticky;
  bottom:0;
  background-color: #0000ffff;
}
::-webkit-scrollbar { // to hide scrollbar
  display: none;
}

.app-wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 64px 1fr;
  overflow: auto;
  
}

.sub-header {
  background: yellowgreen;
}

推荐阅读