设置box-sizing:border-box后盒子高度未按预期生效问题咨询

问题根因 #

• 父元素内前置<p>标签占用高度
  父元素.div1内部首先渲染了<p>This is the parent! </p>元素，浏览器默认给p标签设置了上下外边距，这部分内容会优先占用父元素的高度空间，留给子元素.div2的实际可用高度远小于.div1设置的200px。
• 百分比padding的计算规则不符合预期
  CSS规范中，所有百分比形式的padding值（包括padding-top/padding-bottom），都是相对于父元素的宽度计算，而非父元素高度。你的父元素.div1宽度为500px，20%的padding换算后就是100px，上下padding加起来就是200px，再加上.div2上下4px的边框，仅这两部分的高度总和已经达到208px，超过了父元素.div1的总高度，哪怕没有内容也会溢出父容器，最终表现为高度异常。
• 百分比高度的计算基准问题
  你给.div2设置的height:90%，本应基于父元素的内容高度计算，但父元素的内容高度已经被前置p标签占用了一部分，计算基数本身就不是你预期的200px，进一步加剧了高度异常的问题。

修复建议 #

可以根据你的实际布局需求选择对应方案：

1. 如果需要保留父元素内的p标签，先重置p标签的默认外边距：给p标签添加margin: 0样式，避免不必要的高度占用。
2. 不要用百分比设置上下padding，如果需要固定内边距可以用px单位，如果你想要内边距和视口高度挂钩，可以用vh单位，或者通过CSS变量绑定父元素高度来计算对应数值。
3. 如果需要子元素高度严格基于父元素总高度计算，可以把父元素设置为flex布局，避免前置元素的高度影响子元素的高度分配。

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