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

stpoa 发表于 Dev

Stpoa

我在下面创建了一个想要实现的示例。它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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。