为何子div的百分比min-height属性不生效？（header/main/footer布局）

这个问题我之前也踩过好几次坑！主要是CSS中高度计算的几个默认规则在搞鬼，我给你拆解一下核心原因和解决办法：

1. 块级元素的高度默认是“内容驱动”的 #

默认情况下，div这类块级元素的height属性值是auto——也就是说它的高度完全由内部内容的高度决定，不会自动继承父元素的高度。哪怕你的main已经有了明确的高度，子元素#content如果没设置高度规则，只会缩成内容的高度，不会撑满整个main。

解决办法：给#content显式设置height: 100%;，让它继承父元素main的高度。

2. main的高度计算需要正确的上下文 #

你设置了min-height: calc(100% - 250px);，但这里的100%是相对于main的父元素（一般是body或者html）的高度而言的。如果你的html和body没有设置height: 100%;，那这个100%就没有参考基准，main的min-height根本不会生效，自然#content也没法撑满。

必须先给根元素设置高度：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免滚动条出现 */
  padding: 0;
}

3. 边距/内边距的干扰 #

如果main或者#content有默认的margin或padding，会导致高度计算出现偏差。比如main有padding的话，#content设置height:100%会超出main的范围；如果有margin，则会让#content的实际可用高度变小。

解决办法：给相关元素设置box-sizing: border-box;，让内边距和边框都包含在元素的高度计算内：

main, #content {
  box-sizing: border-box;
}

更省心的现代方案：用Flexbox布局 #

其实不用纠结百分比高度的计算，用Flexbox可以一键解决这个问题，还能适配各种屏幕尺寸：

/* 把body设为垂直方向的flex容器 */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* header和footer固定高度 */
header, footer {
  height: 125px; /* 假设各125px，总和250px */
}

/* main自动填充剩余空间 */
main {
  flex: 1;
  /* 如果要让#content也撑满main，把main也设为flex容器 */
  display: flex;
  flex-direction: column;
}

/* #content自动填充main的剩余空间 */
#content {
  flex: 1;
}

这种方式下，不管header和footer的高度怎么调整，main都会自动占满剩余空间，#content也会完美撑满main，完全不用手动计算百分比。

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