CSS Flexbox问题：让.frame占据.square后的剩余空间

你遇到的核心问题是CSS百分比高度依赖父元素的明确高度定义——如果父容器没有设置具体高度，子元素的height: 100%不会生效。下面给你两种简单可靠的解决方案：

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

通过弹性布局让.frame自动填充.square下方的剩余空间，无需手动计算高度：

/* 先确保根元素和body占满视口高度（如果容器是body的直接子元素） */
html, body {
  height: 100%;
  margin: 0; /* 清除默认边距 */
}

/* 给.frame的父容器设置弹性布局 */
.container {
  background: green;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  min-height: 100vh; /* 让容器至少占满视口高度，可根据需求调整 */
}

.square {
  width: 200px;
  height: 200px;
  background: white;
}

.frame {
  flex: 1; /* 关键：占据容器剩余的所有空间 */
  width: 100%; /* 可选，flex子元素默认会自动占满宽度 */
  /* 可添加背景色测试效果 */
  background: rgba(0,0,0,0.1);
}

对应的HTML结构示例：

<div class="container">
  <div class="square">我是上方的方块</div>
  <div class="frame">我要占满下方绿色区域</div>
</div>

方案2：Grid布局 #

用网格布局分配空间，同样能实现自动填充：

html, body {
  height: 100%;
  margin: 0;
}

.container {
  background: green;
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行自适应.square高度，第二行占剩余空间 */
  min-height: 100vh;
}

.square {
  width: 200px;
  height: 200px;
  background: white;
}

.frame {
  width: 100%;
}

关键说明 #

• 如果你的.frame父容器不是直接嵌套在body下，要确保所有上层父元素都有明确的高度（或用min-height: 100%传递高度），否则弹性/网格布局的高度计算会失效。
• 两种方案都不需要给.frame设置height: 100%，靠布局属性自动填充剩余空间更灵活，适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者Gustavo Da Costa Pereira