`height`属性：

Question

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。

Answer 1

块元素的高度默认为块内容的高度。所以，给出这样的东西：

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

#inner会变得足够高以容纳段落，而#outer会变得足够高以容纳#inner。

当您将高度或宽度指定为百分比时，这是相对于元素父级的百分比。在宽度的情况下，除非另有说明，否则所有块元素都与其父元素一样宽，一直到<html>;因此，块元素的宽度与其内容无关，并且width: 50%会产生明确定义的像素数。

但是，除非指定特定高度，否则块元素的高度取决于其内容。因此父母和孩子之间存在高度反馈，并说height: 50%不会产生明确定义的值，除非您通过给父元素指定特定高度来打破反馈循环。

Answer 2

height属性中的百分比值有一点复杂性，width和height属性实际上彼此表现不同。 让我带您浏览一下规格。

`height`属性：

让我们看看what CSS Snapshot 2010 spec says about height：

百分比是根据生成的框包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为“自动”。根元素的百分比高度相对于初始包含块。注意：对于其包含块基于块级元素的绝对定位元素，百分比是根据该元素的填充框的高度计算的。

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

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

containing block是什么？它有点复杂，但对于默认static位置的普通元素，它是：

最近的块容器祖先盒

或英文，其父框。（同样值得了解fixed和absolute位置的内容，但我忽略了这一点，以保持此答案的简短。）

所以请看这两个例子：

＆＃13;

<div   id="a"  style="width: 100px; height: 200px; background-color: orange">
  <div id="aa" style="width: 100px; height: 50%;   background-color: blue"></div>
</div>

＆＃13;

<div   id="b"  style="width: 100px;              background-color: orange">
  <div id="bb" style="width: 100px; height: 50%; background-color: blue"></div>
</div>

＆＃13;

在此示例中，#aa的包含块为#a，依此类推#b和#bb。到目前为止，非常好。

height规范的下一句是我在这个答案的引言中提到的复杂性：

如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未完全定位，则值计算为＆＃39;自动＆＃39;

啊哈！是否明确指定了包含块的高度很重要！

在height:200px
的情况下，#aa的50％为100px
但height:auto的50％是auto，#bb的情况为0px，因为auto没有内容可以扩展到

正如规范所说，包含块是否已经绝对定位也很重要，但让我们继续width。

width属性：

那么它对width的工作方式是否相同？我们来看看the spec：


百分比是根据生成的包含块的宽度计算的。

看看这些熟悉的示例，从上一个调整后改变width而不是height：

＆＃13;
＆＃13;
<div id="c" style="width: 200px; height: 100px; background-color: orange"> <div id="cc" style="width: 50%; height: 100px; background-color: blue"></div> </div>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13;
<div id="d" style=" height: 100px; background-color: orange"> <div id="dd" style="width: 50%; height: 100px; background-color: blue"></div> </div>
＆＃13;
＆＃13;
＆＃13;

在width:200px
的情况下，#cc的50％为100px
width:auto的50％是width:auto最终的50％，与height不同，没有特殊规则可以区别对待此情况。

现在，这是一个棘手的问题：auto意味着不同的事情，部分取决于是否已为width或height指定了它！对于height，它只是指适合内容*所需的高度，但对于width，auto实际上更复杂。您可以在代码片段中看到，在这种情况下，它最终成为视口的宽度。

the spec say about the auto value for width是什么？


宽度取决于其他属性的值。请参阅以下部分。

Wahey，这没什么用。为了免除您的麻烦，我们找到了我们用例的相关部分，标题为＆＃34;计算宽度和边距＆＃34;，字幕为"block-level, non-replaced elements in normal flow"：


以下约束必须包含在其他属性的已使用值中：

＆＃39;利润率左＆＃39; +＆＃39; border-left-width＆＃39; +＆＃39; padding-left＆＃39; +＆＃39;宽度＆＃39; +＆＃39; padding-right＆＃39; +＆＃39; border-right-width＆＃39; +＆＃39; margin-right＆＃39; =包含块的宽度

好的，所以width加上相关的边距，边框和填充边框都必须加起来包含块的宽度（不是后代height的工作方式）。再说一句规则：


如果＆＃39;宽度＆＃39;设置为＆＃39; auto＆＃39;，任何其他＆＃39; auto＆＃39;价值观成为＆＃39; 0＆＃39;和＃＆＃39;宽度＆＃39;从产生的平等开始。

啊哈！因此，在这种情况下，50％的width:auto是视口的50％。希望现在一切都有意义了！

<子>脚注

_{*至少，在这种情况下至关重要。 spec好吧，现在只有一切才有意义。}

Answer 3

我认为你只需要给它一个父容器......即使该容器的高度是以百分比定义的。这种接缝很好用： JSFiddle

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

Answer 4

你需要给它一个高度的容器。 width使用视口作为默认宽度

Answer 5

另一种选择是为div添加样式

<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
 //to be scrolled 
</div>

这意味着元素相对于最近的祖先定位。

Answer 6

没有内容，高度没有值来计算百分比。但是，如果未指定父级，宽度将占用DOM的百分比。（使用你的例子）将第二个div放在第一个div中，会产生一个结果......下面的例子......

<div id="working">
  <div id="not-working"></div>
</div>

第二个div将是第一个div高度的30％。

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

6 个答案:

`height`属性：

`width`属性：

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

6 个答案:

height属性：

width属性：

`height`属性：

`width`属性：