如何设置首个div为20vmin时，另一个div占据剩余空间？

为什么80vmin和80%不生效？ #

• 80vmin是视口最小边的80%，属于固定值，若父容器高度不等于视口高度、或存在内边距/外边距，总高度会超出父容器，无法准确占据剩余空间。
• 80%是相对于父元素高度的比例，但如果父元素未设置明确高度（默认是auto），百分比高度无法生效；即使父元素有高度，也只是父元素高度的80%，而非扣除第一个div后的剩余空间。

最优解决方案：使用Flexbox或Grid布局 #

这两种现代布局方式能自动计算并分配剩余空间，完美适配你的需求。

方案1：Flexbox布局

给父容器设置flex布局，让第二个div自动填充剩余高度：

<div class="container">
  <div class="top-div">固定高度20vmin</div>
  <div class="bottom-div">剩余高度</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 若父容器是其他元素，可设为对应高度，比如100%（需确保父级有明确高度） */
  box-sizing: border-box; /* 避免内边距撑开容器高度 */
}

.top-div {
  height: 20vmin;
  background: #f0f0f0;
}

.bottom-div {
  flex: 1; /* 自动占据剩余空间 */
  background: #e0e0e0;
}

方案2：Grid布局

通过网格行的fr单位分配剩余空间：

<div class="container">
  <div class="top-div">固定高度20vmin</div>
  <div class="bottom-div">剩余高度</div>
</div>

.container {
  display: grid;
  grid-template-rows: 20vmin 1fr; /* 第一行20vmin，第二行占剩余空间 */
  height: 100vh; /* 可根据实际场景调整高度 */
  box-sizing: border-box;
}

.top-div {
  background: #f0f0f0;
}

.bottom-div {
  background: #e0e0e0;
}

注意事项 #

• 父容器必须设置明确的高度（比如100vh对应视口高度，或100%对应父级容器高度），否则布局无法正确计算剩余空间。
• 若父容器有内边距，一定要加上box-sizing: border-box，防止内边距额外撑开容器高度。

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