Html 如何制作一个空的网格模板行来填充剩余空间

发布于04月07日

如何创建一个有3行的网格布局，使这些行填满整个屏幕，即使这些行是空的？

例如，页眉和页脚的大小分别为100px和50px.中间的网格行(主区域)应该会填满剩余的屏幕.

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px auto 50px;
}

header {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: bisque;
}

main {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: chocolate;
}

footer {
  grid-column: 1/2;
  grid-row: 3/4;
  background-color: darkolivegreen;
}

<body class="grid">

  <header>
    Header
  </header>

  <main>
    Main
  </main>


  <footer>
    Footer
  </footer>

</body>

我在这里读过类似的问题，但没有找到合适的(我也是网页设计的初学者).

enter image description here

推荐答案

有两种解决方案，好的和不好的:

确定parent div高度并使用1fr

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px 1fr 50px;
  min-height: 100vh;
}

go 掉grid-template-rows，分别测定 children 身高

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

header {
  background-color: bisque;
  height: 100px;
}

main {
  background-color: chocolate;
  height: calc(100vh - 250px);
}

footer {
  background-color: darkolivegreen;
  height: 150px;
}

正如我提到的，可以说，第一种解决方案要复杂得多……