首页猿问 CSS-为什么百分比高度不工作？

CSS-为什么百分比高度不工作？

Html/CSS

慕村9548890 2019-07-03 14:11:06

CSS-为什么百分比高度不工作？为什么百分比值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-working结果是0。

查看完整描述

3 回答

莫回无

TA贡献1865条经验获得超7个赞

块元素的高度默认为块内容的高度。所以，考虑到这样的情况：

<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div></div>

#inner会长得足够高，足以容纳这段话#outer会长得足够高#inner.

当您将高度或宽度指定为百分比时，这是相对于元素的父元素的百分比。在宽度的情况下，除非另有规定，否则所有块元素都与其父元素一样宽。<html>因此，块元素的宽度与其内容和语句无关。width: 50%生成定义良好的像素数。

但是，块元素的高度取决于它的内容除非你指定了一个特定的高度。所以父母和孩子之间的反馈是关于身高的，并且说height: 50%除非您通过给父元素一个特定的高度来打破反馈循环，否则不会产生一个定义良好的值。

反对回复 2019-07-03

慕尼黑5688855

TA贡献1848条经验获得超2个赞

a中的百分比值。height属性有一点复杂，而且width和height实际上，属性之间的行为是不同的。让我带你参观一下说明书。

`height`财产：

让我们看看CSS快照2010规范的内容height:

该百分比是根据生成的框的高度计算的。含块..如果未显式指定包含块的高度(即它取决于内容高度)，且该元素不是绝对定位的，则该值将计算为“AUTO”。根元素上的百分比高度相对于初始包含块..注意：对于绝对定位元素，其包含块的元素是基于块级元素的，该百分比是根据该元素的填充框的高度计算的。

好的，让我们一步地分开：

该百分比是根据生成的框的高度计算的。含块.

什么是含块？这有点复杂，但是对于默认的普通元素来说static位置，它是：

最近的块容器祖先框

或者用英语，它的父框。(很值得知道这是为了什么fixed和absolute立场也是如此，但我忽略了这一点，以保持简短的回答。)

以这两个例子为例：

</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>

</div>

50%
width:200px
的情况下，为100 px。
#cc
50%
width:auto
是任何东西的50%
width:auto
不像
height
，没有特殊的规则来区别对待这一案件。

现在，这里有一个棘手的部分：auto意味着不同的事物，部分取决于它是否被指定为width或height！为height，它仅仅意味着满足内容所需的高度*width, auto实际上更复杂。您可以从代码片段中看到，在本例中，它最终是视口的宽度。

什么规格说明了宽度的自动值。?

宽度取决于其他属性的值。见以下章节。

哇，这没什么用。为了省去麻烦，我找到了我们用例的相关部分，标题为“计算宽度和边距”，副标题为“正常流动中的块级，不可替换的元素”:

下列约束必须包含在其他属性的使用值中：
“边距-左”+“左-宽”+“左”+“宽”+“右”+“边框-右-宽”+“边-右”=包含块的宽度。

好吧，那么width加上相关的边距，边框和填充边框必须加到包含块的宽度(不后人之路height)。再来一句话：

如果“宽度”设置为“AUTO”，则任何其他“AUTO”值都将变为“0”，而“宽度”则遵循由此产生的相等。

啊哈！所以在这种情况下，50%的width:auto占视野的50%。希望现在一切都有意义了！

_脚注

_{*至少就本案而言是如此。规格好吧，现在一切都有意义了。}

反对回复 2019-07-03

蓝山帝景

TA贡献1843条经验获得超7个赞

我觉得你只需要给它一个家长容器.。即使容器的高度是以百分比来定义的。这个接缝工作得很好：JSFiddle

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%;}.wrapper { 
    width: 100%; 
    height: 100%; }.container { 
    width: 100%; 
    height: 50%; }

反对回复 2019-07-03

3 回答
0 关注
316 浏览

关注

CSS-为什么百分比高度不工作？

CSS-为什么百分比高度不工作？

3 回答

`height`财产：

`width`财产：

相关问题推荐

添加回答

热搜

最近搜索清空

CSS-为什么百分比高度不工作？

CSS-为什么百分比高度不工作？

3 回答

height财产：

width财产：

相关问题推荐

添加回答

`height`财产：

`width`财产：