为何给.landing .container .text设置height:100%及calc无效？

问题原因 #

• 父级.landing使用min-height而非固定height，导致子元素.container的height:100%无法获取明确高度参照——CSS中百分比高度依赖父元素有确定的height值，min-height不提供该参照。
• .container作为flex容器设置了align-items: center，这个属性会强制flex子元素（包括.text）高度收缩为自身内容高度，直接覆盖height:100%的设置。

修复方案 #

如果目标是让.text填满.container的高度（与橙色区域同高），按以下步骤修改：

1. 给.landing添加明确height值，同时保留min-height确保小屏幕自适应：

.landing {
  position: relative;
  height: calc(100vh - 72px);
  min-height: calc(100vh - 72px);
  background-color: orange;
}

2. 修改.container的align-items为默认值stretch，让flex子元素自动填满容器高度；给.image添加内部垂直居中，保证图片位置正确：

.landing .container {
  width: 1200px;
  margin: auto;
  display: flex;
  align-items: stretch; /* 替换center为stretch */
  height:100%;
}

.landing .container .image {
  width: 600px;
  display: flex;
  align-items: center; /* 内部垂直居中图片 */
}

3. 移除.text中的height:100%，align-items: stretch已自动让它填满容器高度：

.landing .container .text {
  flex: 1;
  background-color:red;
  /* 删除height:100% */
}

修改后的完整CSS代码：

.landing {
  position: relative;
  height: calc(100vh - 72px);
  min-height: calc(100vh - 72px);
  background-color: orange;
}

.landing .container {
  width: 1200px;
  margin: auto;
  display: flex;
  align-items: stretch;
  height:100%;
}
.landing .container .image {
  width: 600px;
  display: flex;
  align-items: center;
}
.landing .container .image > img {
  max-width: 100%;
}
.landing .container .text {
  flex: 1;
  background-color:red;
}
.landing .container .text > h1 {
  font-size: 40px;
  margin: 0;
  letter-spacing: -2px;
}
.landing .container .text > p {
  font-size: 23px;
  line-height: 1.7;
  color: #666;
}

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