我试图让一些divss扩展以填满屏幕,但我正在努力.我已经解决了这个问题的问题.
我真正想知道的是,为什么当它的父元素具有相同的属性并且扩展时div,它的100%min-height不会扩展到那个高度(或者根本没有)？
<body>
<div>
stuff
</div>
</body>
body {
min-height: 100%;
background: red;
}
div {
min-height: 100%;
background: grey;
}
Rya*_*nal 17
这个问题在CSS 2.1规范中有所涉及:
<百分比>
指定百分比高度.百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值将计算为"auto".根元素的百分比高度相对于初始包含块.注意:对于其包含块基于块级元素的绝对定位元素,百分比是根据该元素的填充框的高度计算的.这是CSS1的变化,其中百分比始终相对于父元素的内容框计算.
因此,为了澄清,百分比高度将参考其包含块的高度(除非它是position: absolute或position: fixed).如果包含块的块没有指定的高度,则百分比将引用auto,并且它实际上不会做太多.
position: absolute改变所述参考包含块到位于最近的(absolute,relative,或fixed)元素.
position: fixed 将引用的包含块更改为视口.
因此,如果在包含块上指定高度,在包含块上指定静态以外的位置,或者不介意将视口用作包含块,则可以有效地使用百分比高度.
请参阅我在jsFiddle的演示
phi*_*hag 11
您还需要设置高度,html以便100%引用视口高度而不是文档高度(演示):
html,body {
height: 100%;
background: red;
padding: 0;
}
div {
height: 100%;
background: grey;
}
| 归档时间： |
|
| 查看次数： |
7315 次 |
| 最近记录： |