CSS - height 属性继承问题 · Issue #4 · jtwang7/CSS-Note

link管理

链接快照平台

height vs width

元素的 width 属性具有继承性，它可以参照并继承具有有效 width 属性值的最近父级或父级以上元素的 width 属性值，如果没有父元素或祖先元素，那么参照的是初始包含块，大部分浏览器将可视区当作绝对定位的包含块。

与 width 属性不同，元素的 height 属性不具有继承性，其只能参考其父级元素的 height 属性值，若父级元素的 height 属性值是有效的（即是固定值或者可由其父级计算得到），则


    height: 100%

会参照父级元素 height 值得到自身元素的 height，若父级元素的 height 属性值无效（比如


    height: 100%

且其父级元素没有有效值，则元素 height 高度实际是不确定的），则自身 height 只能通过子元素的 height 确定。

对于有 absolute 定位的元素，其高度为百分比时会参照父元素或祖先元素的高度，绝对定位参照的是离它最近的父元素或祖先元素，如果没有父元素或祖先元素，那么参照的是初始包含块，大部分浏览器将可视区当作绝对定位的初始包含块。

height: 100% 不起作用主要与浏览器 计算宽度和高度的机制 不同有关。

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。

但是高度的计算方式完全不一样。事实上，浏览器根本就 不计算内容的高度 ，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并 没有缺省的高度值 ，所以，**当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。**换句话说，父元素的高度只是一个缺省值：


    height: auto

。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到


    undefined

的结果。也就是一个


    null

值，浏览器不会对这个值有任何的反应。

给当前元素设置


    position: absolute

，这样它就能参考父级或父级以上元素的高度值，从而可以确保搜寻到一个有效高度值（至少一个，即浏览器视口高度），但该方法会使当前元素脱离文档流，影响整体布局。

手动实现高度传递，从


    body, html

开始，沿着布局结构对每个元素设置


    height: 100%

，将浏览器视口高度向下传递。该方法适用于结构简单，嵌套不深的 HTML 文档。此外，还可以在传递过程中利用 CSS3 的


    calc()

新特性计算和修改高度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

calc()函数支持 "+", "-", "*", "/" 运算；

calc()函数使用标准的数学运算优先级规则；

通过 vh / vw 我们可以获得当前屏幕的视窗大小。所以在 css 中，通过计算 vh 的具体高度即可使得 div 的高度自动撑开到屏幕高度。而计算视窗的有效高度可以使用 css3 的 calc() 函数。

div { height: calc(100vh);

通过该方法设置一个元素的高度等于视窗高度，就不需要从body 或 html一步步传递浏览器视口高度到目标元素。在布局时有奇效。