The Height Enigma (CSS)
a year ago
- #Web Development
- #CSS
- #Layout
- CSS的height属性有时会因为父元素与子元素之间的循环计算而失效
- CSS中width和height的计算方式不同：width取决于父元素，而height取决于子元素
- 基于百分比的高度要求父元素具有'可确定'的高度（不能依赖于子元素的高度）
- 在父元素上使用明确的高度单位（如px或rem）才能使子元素的百分比高度生效
- 根<html>标签可以使用height:100%，因为它参照的是视口而非父元素
- Flexbox和Grid布局可以通过改变元素填充可用空间的方式来避免高度问题
- min-height无法解决循环高度问题，因为它仍然依赖于子元素的内容
- 不同的CSS布局算法（常规流、Flexbox、Grid）会影响高度的计算方式