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

Question

我在下面创建了一个我想要实现的示例。它对顶部和底部栏使用 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

Answer 1

你不需要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>