Web*_*ner 219 css height width
为什么百分比值height不起作用,但百分比值width呢？
例如:
<div id="working"></div>
<div id="not-working"></div>
#working{
width:80%;
height:140px;
background:orange;
}
#not-working{
width:80%;
height:30%;
background:green;
}
最终的宽度为#working视口的80%,但最终的高度为#not-working0.
mu *_*ort 329
块元素的高度默认为块内容的高度.所以,给出这样的东西:
<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>
#inner将变得足够高,以包含段落,#outer并将增长到足够高,以包含#inner.
当您将高度或宽度指定为百分比时,这是相对于元素父级的百分比.在宽度的情况下,除非另有说明,否则所有块元素都与它们的父级一样宽,直到最后<html>; 因此,块元素的宽度与其内容无关,并且width: 50%产生明确定义的像素数.
但是,除非指定特定高度,否则块元素的高度取决于其内容.因此父母和孩子之间存在反馈,其中涉及身高并且说height: 50%不会产生明确定义的值,除非您通过给父元素指定特定高度来打破反馈循环.
Fli*_*imm 120
height属性中的百分比值具有一点复杂性,width并且height属性实际上彼此表现不同.让我带你参观规格.
height 属性:让我们来看看CSS Snapshot 2010规范所说的内容height:
百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值将计算为"auto".根元素的百分比高度相对于初始包含块.注意:对于其包含块基于块级元素的绝对定位元素,百分比是根据该元素的填充框的高度计算的.
好吧,让我们一步一步地分开:
百分比是根据生成的框的包含块的高度计算的.
什么是包含块？它有点复杂,但对于默认static位置的普通元素,它是:
最近的块容器祖先盒子
或英文,其父框.(非常值得知道它的用途fixed和absolute位置,但我忽略了这一点,以保持这个答案简短.)
所以请看这两个例子:
<div id="a" style="width: 100px; height: 200px; background-color: orange">
<div id="aa" style="width: 100px; height: 50%; background-color: blue"></div>
</div><div id="b" style="width: 100px; background-color: orange">
<div id="bb" style="width: 100px; height: 50%; background-color: blue"></div>
</div>在这个例子中,包含块#aa是#a,等等for #b和#bb.到现在为止还挺好.
规范的下一句height是我在这个答案的引言中提到的复杂性:
如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值将计算为"auto".
啊哈!是否明确指定了包含块的高度!
height:200px在这种情况下,50%是100px#aaheight:auto是auto,#bb因为没有内容auto可以扩展到0px正如规范所说,包含块是否已经绝对定位也很重要,但让我们继续width.
width 属性:它的工作方式是否相同width？我们来看看规范:
百分比是根据生成的框的包含块的宽度计算的.
看看这些熟悉的例子,从前面的调整来改变width而不是height:
<div id="c" style="width: 200px; height: 100px; background-color: orange">
<div id="cc" style="width: 50%; height: 100px; background-color: blue"></div>
</div><div id="d" style=" height: 100px; background-color: orange">
<div id="dd" style="width: 50%; height: 100px; background-color: blue"></div>
</div>width:200px在这种情况下,50%是100px#ccwidth:auto是50%的width:auto最终结果,不像height,没有特殊的规则以不同的方式对待这种情况.现在,这里是棘手的一点:auto意味着不同的东西,部分取决于它是否被指定为width或height!对height,它只是为了适应内容*,但对于需要高度width,auto实际上是更复杂.您可以从代码片段中看到,在这种情况下,它最终成为视口的宽度.
规范对宽度的自动值有什么看法？
宽度取决于其他属性的值.请参阅以下部分.
Wahey,这没什么用.为了省去麻烦,我找到了我们用例的相关部分,标题为"计算宽度和边距",副标题为"正常流程中的块级,非替换元素":
其他属性的已使用值必须包含以下约束:
'margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right'=包含块的宽度
好的,所以width加上相关的边距,边框和填充边框都必须加起来包含块的宽度(不是后代的工作方式height).再说一句规则:
如果'width'设置为'auto',则任何其他'auto'值变为'0',并且'width'跟随得到的相等.
啊哈!因此,在这种情况下,50%width:auto是视口的50%.希望现在一切都有意义!
脚注
*至少,在这种情况下,重要的是.规范好吧,现在一切都有道理.
Dav*_*ins 10
我认为你只需要给它一个父容器......即使容器的高度是以百分比定义的.这个接缝工作得很好:JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 50%;
}
小智 5
另一种选择是为div添加样式
<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
//to be scrolled
</div>
这意味着元素相对于最近的定位祖先定位.