CSS-为什么百分比高度不工作？
CSS-为什么百分比高度不工作？
heightwidth
<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#not-working
慕村9548890浏览 317回答 3
3回答
-
莫回无
块元素的高度默认为块内容的高度。所以，考虑到这样的情况：<div id="outer"> <div id="inner"> <p>Where is pancakes house?</p> </div></div>#inner会长得足够高，足以容纳这段话#outer会长得足够高#inner.当您将高度或宽度指定为百分比时，这是相对于元素的父元素的百分比。在宽度的情况下，除非另有规定，否则所有块元素都与其父元素一样宽。<html>因此，块元素的宽度与其内容和语句无关。width: 50%生成定义良好的像素数。但是，块元素的高度取决于它的内容除非你指定了一个特定的高度。所以父母和孩子之间的反馈是关于身高的，并且说height: 50%除非您通过给父元素一个特定的高度来打破反馈循环，否则不会产生一个定义良好的值。 -
慕尼黑5688855
a中的百分比值。height属性有一点复杂，而且width和height实际上，属性之间的行为是不同的。让我带你参观一下说明书。height财产：让我们看看CSS快照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等等#b和#bb..到现在为止还好。规范的下一句height我在这个答案的导言中提到的复杂之处是：如果包含块的高度未显式指定。(也就是说，它取决于内容高度)，并且这个元素不是绝对定位的，该值计算为“自动”.啊哈！是否已显式指定了包含块的高度！50%height:200px的情况下，为100 px。#aa但是50%的height:auto是auto的情况下为0px。#bb因为没有任何内容auto扩展到正如规范所述，包含块是否已被绝对定位也很重要，但让我们继续讨论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>50%width:200px的情况下，为100 px。#cc50%width:auto是任何东西的50%width:auto不像height，没有特殊的规则来区别对待这一案件。现在，这里有一个棘手的部分：auto意味着不同的事物，部分取决于它是否被指定为width或height！为height，它仅仅意味着满足内容所需的高度*width, auto实际上更复杂。您可以从代码片段中看到，在本例中，它最终是视口的宽度。什么规格说明了宽度的自动值。?宽度取决于其他属性的值。见以下章节。哇，这没什么用。为了省去麻烦，我找到了我们用例的相关部分，标题为“计算宽度和边距”，副标题为“正常流动中的块级，不可替换的元素”:下列约束必须包含在其他属性的使用值中：“边距-左”+“左-宽”+“左”+“宽”+“右”+“边框-右-宽”+“边-右”=包含块的宽度。好吧，那么width加上相关的边距，边框和填充边框必须加到包含块的宽度(不后人之路height)。再来一句话：如果“宽度”设置为“AUTO”，则任何其他“AUTO”值都将变为“0”，而“宽度”则遵循由此产生的相等。啊哈！所以在这种情况下，50%的width:auto占视野的50%。希望现在一切都有意义了！脚注*至少就本案而言是如此。规格好吧，现在一切都有意义了。 -
蓝山帝景
我觉得你只需要给它一个家长容器.。即使容器的高度是以百分比来定义的。这个接缝工作得很好：JSFiddlehtml, body { margin: 0; padding: 0; width: 100%; height: 100%;}.wrapper { width: 100%; height: 100%; }.container { width: 100%; height: 50%; }
随时随地看视频慕课网APP
Html/CSS