如何设置TARGETDIV高度以最大化适配屏幕剩余空间？

你的HTML结构：

<div id="FirstDiv"></div>
<div id="SecondDiv"></div>
<div id="TARGETDIV"></div>

现有CSS：

#FirstDiv {
  width: 100vw;
  height: 50px;
}

#SecondDiv {
  width: 100vw;
  height: 230px;
}

#TARGETDIV {
  width: 100vw;
  height: /* What code should be here? */;
}

以下是几种可靠的解决方案：

方案1：Flexbox布局（推荐） #

这种方法灵活性最高，即使前两个div高度后续有变动，也无需修改TARGETDIV的样式。

首先重置全局默认样式并设置父容器布局：

html, body {
  margin: 0;
  padding: 0;
  height: 100vh; /* 让body充满整个视口高度 */
}

body {
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
}

修改TARGETDIV的样式：

#TARGETDIV {
  width: 100vw;
  flex: 1; /* 自动占据容器剩余的所有空间 */
}

方案2：CSS Grid布局 #

适合更复杂的页面结构，同样具备高度灵活性：

重置全局样式并设置Grid布局：

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

body {
  display: grid;
  /* 前两行自适应内容高度，第三行占剩余空间 */
  grid-template-rows: auto auto 1fr;
}

此时TARGETDIV无需设置height属性，Grid会自动分配剩余空间，width:100vw可保留或省略（块级元素默认占满父容器宽度）。

方案3：calc()计算高度 #

适合简单场景，但需要手动维护高度数值：

先重置全局样式：

html, body {
  margin: 0;
  padding: 0;
}

直接计算剩余高度：

#TARGETDIV {
  width: 100vw;
  height: calc(100vh - 50px - 230px);
}

解释：100vh是当前视口的总高度，减去前两个div的固定高度，得到TARGETDIV的可用高度。注意：如果后续前两个div高度改变，此处必须同步修改数值。

关键注意事项 #

• 必须重置html和body的默认margin和padding，否则浏览器自带的边距会导致页面出现滚动条或元素错位。
• 如果页面包含其他固定高度的元素（比如页脚），需要在布局中额外考虑这些元素的高度。

内容的提问来源于stack exchange，提问作者Mini Programmer