我正在尝试使用网格布局创建固定的页眉和页脚。我希望页眉始终在视口的顶部,而页脚始终在视口的底部。 “内容”应从顶部向下推,从底部向上推以抵消页眉/页脚内容。并且滚动条应滚动内容区域。
在我先将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>
我在做什么错了?