body设height:100%与max-height:100%时内部元素高度为何有差异？

咱们先把两种写法的核心区别说透，再聊子元素高度的问题：

1. 两种body高度设置的本质差异 #

• 写法一：html { height: 100%; } body { height: 100%; }
  这个写法是给body固定死了高度——不管页面内容多还是少，body的高度就等于当前视口的100%。如果内容超过视口高度，body不会跟着长高，内容会直接从body里面“溢”出去。
• 写法二：html { height: 100%; } body { min-height: 100%; }
  这个是给body设了最小高度：如果页面内容很少，body会自动撑到视口100%的高度；如果内容超过了视口，body会跟着内容一起长高，完全包裹住所有内容，不会出现溢出。

2. 为什么子元素height:100%只在body设height:100%时生效？ #

CSS里的百分比高度规则很明确：子元素的百分比高度，必须基于父元素明确设置的height属性值来计算，min-height、max-height这些属性都不算有效参考基准。

• 当body设height:100%时，body有了一个明确的、固定的计算高度（就是视口高度），内部div的height:100%就能直接继承这个高度，自然撑满整个视口。
• 当body设min-height:100%时，body的实际高度是由内容决定的：内容少的时候，body实际高度是100%视口，但CSS不认min-height作为百分比高度的参考——它只认父元素明确写的height。所以div的height:100%找不到有效的参考值，就只能默认跟着自己的内容走，没法撑满视口了。

打个生活化的比方：

• 写法一就像你给孩子爸明确说“你必须站在1米8的标记线上”，孩子说“我要跟爸爸一样高”，就能精准站到1米8的位置。
• 写法二是给孩子爸说“你至少站到1米8的线，要是你自己长得更高就随便站”，孩子问“爸你多高”，爸说“我不确定，看我自己的情况”，孩子就没法确定自己要站多高了。

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