Question

我试图将页眉/页脚位置固定在窗口的顶部/底部，只滚动中间内容。
我尝试在容器上固定位置以及溢出内容无效。有什么建议吗？

由于

＆＃13;

header,
footer {
  font-weight: bold;
  height: 2em;
  line-height: 2em;
  background-color: #d9d8da;
}
footer li {
  display: inline-block;
  width: 32%;
}
ul {
  padding: 0;
  text-align: center;
}
header label:nth-child(1) {
  float: left;
  padding: 0em 1em 0em 1em;
}
header label:nth-child(2) {
  font-weight: normal;
  position: absolute;
  width: calc(100% - 6.5em);
  text-align: center;
}
header label:nth-child(3) {
  float: right;
  padding: 0em 1em 0em 1em;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/home.css" />
  <title>RRR</title>
  <meta name="viewport" content="width=device-width" />
</head>

<body>

  <header>
    <label>&#9776;</label>
    <label>My app</label>
    <label>&#8942;</label>

  </header>

  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing
      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 adipisicing 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>
  </div>

  <footer>
    <ul>
      <li>NO</li>
      <li>EXTRA</li>
      <li>YES</li>
    </ul>
  </footer>

</body>

</html>

＆＃13;

Answer 1

我忘记在我之前的回答中添加width: 100%;到页眉和页脚。这是您修改的代码：

html, body { 
  heigth: 100%; 
  padding: 0;
  margin: 0;
}

header,
footer {
  position: fixed;
  width: 100%;
  font-weight: bold;
  height: 2em;
  line-height: 2em;
  background-color: #d9d8da;
}
footer {
  position:fixed;
  bottom: 0px;
  height: 2em;
}
.content {
  padding: 2em 0;
 }
footer li {
  display: inline-block;
  width: 32%;
}
ul {
  padding: 0;
  margin: 0;
  text-align: center;
}
header label:nth-child(1) {
  float: left;
  padding: 0em 1em 0em 1em;
}
header label:nth-child(2) {
  font-weight: normal;
  position: absolute;
  width: calc(100% - 6.5em);
  text-align: center;
}
header label:nth-child(3) {
  float: right;
  padding: 0em 1em 0em 1em;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/home.css" />
  <title>RRR</title>
  <meta name="viewport" content="width=device-width" />
</head>

<body>

  <header>
    <label>&#9776;</label>
    <label>My app</label>
    <label>&#8942;</label>

  </header>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing
      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 adipisicing 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>
  </div>

  <footer>
    <ul>
      <li>NO</li>
      <li>EXTRA</li>
      <li>YES</li>
    </ul>
  </footer>

</body>

</html>

Answer 2

将position: fixed;添加到页眉和页脚。

对于页脚，还要添加“bottom：0px`

并且您的内容应该具有足够高的顶部和底部边距，以便在它们一直向上或向下滚动时覆盖这些固定元素的空间。

将页眉和页脚修复到窗口的顶部和底部，仅滚动内容

2 个答案: