Question

我正在尝试使用网格布局创建固定的页眉和页脚。我希望页眉始终在视口的顶部，而页脚始终在视口的底部。 “内容”应从顶部向下推，从底部向上推以抵消页眉/页脚内容。并且滚动条应滚动内容区域。

在我先将position: fixed和top: 0应用于页眉或将bottom: 0应用于页脚时，它会破坏网格布局。

这是我到目前为止尝试过的：

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
}

.div3 {
  grid-area: 2 / 1 / 3 / 3;
}

.div4 {
  grid-area: 3 / 1 / 4 / 2;
}

.div5 {
  grid-area: 3 / 2 / 4 / 3;
}

.parent div {
  background-color: red;
  padding: 5px;
}

.div1,
.div2 {
  position: fixed;
  top: 0;
  height: 50px;
}

.div3 {
  padding: 50px 0 50px 0;
}

.div4,
.div5 {
  position: fixed;
  bottom: 0;
  height: 50px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="parent">
    <div class="div1">a</div>
    <div class="div2">b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br
      />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br
      />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br
      />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br
      />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br /></div>
    <div class="div3">c</div>
    <div class="div4">d</div>
    <div class="div5">e</div>
  </div>
</body>

</html>

我在做什么错了？

具有固定页眉和页脚的html / css网格布局

0 个答案: