html - 固定的页眉，可滚动的内容，固定的页脚布局

我在下面创建了一个想要实现的示例。它在顶部和底部使用position: fixed。但我希望它位于CSS网格内（我不想在页眉和页脚中使用边距，也不想添加隐藏的div元素），有可能吗？

* {
  margin: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: #aaaaaa;
}

main {
  margin-top: 100px;
  margin-bottom: 50px;
  background-color: #dddddd;
  overflow: scroll;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #444444;
}

<header>Header</header>
<main>
  Main start
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br> Main inside
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br> Main end
</main>
<footer>Footer</footer>

https://codepen.io/stpoa/pen/zyPqaq

最佳答案

您不需要position: fixed。您可以使布局仅与网格属性一起使用。

body {
  display: grid;
  grid-template-rows: 100px 1fr 50px;
  height: 100vh;
  margin: 0;
}

main {
  overflow: auto;
}

header { background-color: #aaaaaa; }
main   { background-color: #dddddd; }
footer { background-color: #444444; }

<header>Header</header>
<main>
  Main start<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main inside<br><br><br><br><br><br><br>
  Main end
</main>
<footer>Footer</footer>

关于html - 固定的页眉，可滚动的内容，固定的页脚布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53987558/