Css设置div占满剩余的高度

要让一个 div 元素占满剩余的高度，可以使用 CSS 中的 Flexbox 布局或 Grid 布局。

使用 Flexbox 布局可以通过将父容器设置为 display: flex 和 flex-direction: column，子元素设置为 flex: 1 来实现。如下面的代码：

<div class="container">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置高度为视窗高度 */
.header {
  height: 50px; /* 设置头部高度 */
.content {
  flex: 1; /* 设置内容占满剩余的高度 */
.footer {
  height: 50px; /* 设置底部高度 */
另一种方法是使用 Grid 布局。可以将父容器设置为 display: grid 和 grid-template-rows: 1fr auto 1fr，子元素中要占满剩余高度的元素设置为 grid-row: 2 / 3。如下面的代码：
<div class="container">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
.container {
  display: grid;
  grid-template-rows: 1fr auto 1fr; /* 将父容器划分为三行 */
  height: 100vh; /* 设置高度为视窗高度 */
.header {
  height: 50px; /* 设置头部高度 */
.content {
  grid-row: 2 / 3; /* 将内容放在第二行 */
.footer {
  height: 50px; /* 设置底部高度 */
以上两种方法都可以让 div 元素占满剩余的高度，具体使用哪种方法取决于具体的需求和个人偏好。