html - 高度为 100% 的 Div，显示为 : Grid

Question

我有一个包含页眉、内容区域和页脚的容器 div。我希望页脚始终固定在底部，而内容区域始终填充剩余空间。我不知道该怎么做。

这是我目前拥有的:

.container {
  display: grid;
  /*position: relative;*/
  grid-template-columns: 1fr;
  border: 1px solid black;
}

.header {
  background-color: yellow;
  display: grid;
  grid-template-columns: 3fr 3fr 3fr 1fr;
  padding: 10px 0;
}

.content {
  background-color: teal;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 7fr 1fr;
  padding: 15px 20px 20px 0;
  min-height: 100%;
}

.footer {
  background-color: maroon;
  position: absolute;
  width: 100%;
  bottom: 0;
}

<div class="container">
  <div class="header">This is a header.</div>
  <div class="content">This is a content area.</div>
  <div class="footer">This is a footer.</div>
</div>

如您所见，内容部分并没有一直延伸到页 footer 分。我在这里缺少什么？

谢谢!

Answer 1

使用 grid-template-rows: auto 1fr auto; - 这样 footer 和 header 将只占用他们需要的空间，并且content 将占用其他所有内容。此外，从 footer 中删除 position: absolute; 以使其成为网格项。

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  border: 1px solid black;
  min-height: 100vh;
}

.header {
  background-color: yellow;
  padding: 10px 0;
}

.content {
  background-color: teal;
  padding: 15px 20px 20px 0;
  min-height: 100%;
}

.footer {
  background-color: maroon;
  width: 100%;
}

<div class="container">
  <div class="header">This is a header.</div>
  <div class="content">This is a content area.</div>
  <div class="footer">This is a footer.</div>
</div>