父元素用flex-grow:1时子元素height:100%失效的原因与解决

1. 为什么height:100%在这里不生效？ #

CSS中百分比高度的计算逻辑是：子元素的height:100%需要父元素有明确的、非动态计算的高度值作为参照。

你的代码里，<main>通过flex:1 0 auto获得的高度是Flex容器（<body>）分配的剩余空间，这个高度是动态计算的，并没有显式设置height属性值。此时子元素的height:100%找不到有效的参照高度，自然无法生效。

你之前尝试的height:0能让子元素生效，是因为给<main>设置了明确的高度值，但这会限制<main>的高度，内容溢出时<main>无法被撑开，导致footer失去固定在底部的效果。

2. 不使用Flexbox的解决办法 #

方案1：给<main>添加height:100% + min-height:0 #

修改<main>的CSS：

main {
  flex: 1 0 auto;
  height: 100%;
  min-height: 0; /* 允许内容溢出时容器被撑开 */
  background-color: blanchedalmond;
}

这个方案既给<main>提供了明确的百分比高度参照（继承<body>的高度），min-height:0又能保证内容溢出时<main>可以正常被撑开，footer依然固定在页面底部，子元素的height:100%也能正确生效。

方案2：使用绝对定位 #

给<main>设置相对定位，子元素用绝对定位占满容器：

main {
  flex: 1 0 auto;
  position: relative;
  background-color: blanchedalmond;
}

div#this_should_fill_main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: cornflowerblue;
}

这种方式不依赖百分比高度，直接通过定位让子元素填满父容器，同时<main>的flex-grow属性依然能正常分配剩余空间，内容溢出时也不会影响footer的位置。

方案3：固定高度下用calc计算（灵活性差） #

如果header和footer的高度是固定值，比如都是50px，可以用calc直接计算<main>的高度：

main {
  height: calc(100vh - 100px);
  background-color: blanchedalmond;
}

缺点是header/footer高度变化时需要手动修改计算值，仅适合布局固定的场景。

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