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

Question

提问by Web_Designer

How come a percentage value for heightdoesn't work but a percentage value for widthdoes?

为什么百分比值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;
}

The width of #workingends up being 80% of the viewport, but the height of #not-workingends up being 0.

宽度#working最终为视口的 80%，但高度#not-working最终为 0。

Answer 1

回答by mu is too short

The height of a block element defaults to the height of the block's content. So, given something like this:

块元素的高度默认为块内容的高度。所以，鉴于这样的事情：

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

#innerwill grow to be tall enough to contain the paragraph and #outerwill grow to be tall enough to contain #inner.

#inner将增长到足够高以包含该段落，#outer并将增长到足够高以包含#inner.

When you specify the height or width as a percentage, that's a percentage with respect to the element's parent. In the case of width, all block elements are, unless specified otherwise, as wide as their parent all the way back up to <html>; so, the width of a block element is independent of its content and saying width: 50%yields a well defined number of pixels.

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

However, the height of a block element depends on its contentunless you specify a specific height. So there is feedback between the parent and child where height is concerned and saying height: 50%doesn't yield a well defined value unless you break the feedback loop by giving the parent element a specific height.

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

Answer 2

回答by Flimm

A percentage value in a heightproperty has a little complication, and the widthand heightproperties actually behave differently to each other. Let me take you on a tour through the specs.

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

`height`property:

`height`财产：

Let's have a look at what CSS Snapshot 2010 spec says about height:

让我们来看看CSS Snapshot 2010 规范是怎么说的height：

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element.

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

OK, let's take that apart step by step:

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

The percentage is calculated with respect to the height of the generated box's containing block.

百分比是相对于生成的框的包含块的高度计算的。

What's a containing block? It's a bit complicated, but for a normal element in the default staticposition, it's:

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

the nearest block container ancestor box

最近的块容器祖先盒

or in English, its parent box. (It's well worth knowing what it would be for fixedand absolutepositions as well, but I'm ignoring that to keep this answer short.)

或者用英语，它的父框。（很值得知道它的用途fixed和absolute位置，但我忽略了这一点，以保持这个答案简短。）

So take these two examples:

所以拿这两个例子：

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

In this example, the containing block of #aais #a, and so on for #band #bb. So far, so good.

在这个例子中，包含块#aa是#a等为#b和#bb。到现在为止还挺好。

The next sentence of the spec for heightis the complication I mentioned in the introduction to this answer:

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

If the height of the containing block is not specified explicitly(i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 'auto'。

Aha! Whether the height of the containing block has been specified explicitly matters!

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

50% of height:200pxis 100px in the case of #aa
But 50% of height:autois auto, which is 0px in the case of #bbsince there is no content for autoto expand to

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

As the spec says, it also matters whether the containing block has been absolutely positioned or not, but let's move on to width.

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

`width`property:

`width`财产：

So does it work the same way for width? Let's take a look at the spec:

那么它的工作方式相同width吗？让我们来看看规范：

The percentage is calculated with respect to the width of the generated box's containing block.

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

Take a look at these familiar examples, tweaked from the previous to vary widthinstead of height:

看看这些熟悉的例子，从以前的调整到变化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% of width:200pxis 100px in the case of #cc
50% of width:autois 50% of whatever width:autoends up being, unlike height, there is no special rule that treats this case differently.

width:200px在这种情况下，50%是 100px#cc
50% ofwidth:auto是width:auto最终结果的50% ，与不同的height是，没有特殊规则可以区别对待这种情况。

Now, here's the tricky bit: automeans different things, depending partly on whether its been specified for widthor height! For height, it just meant the height needed to fit the contents*, but for width, autois actually more complicated. You can see from the code snippet that's in this case it ended up being the width of the viewport.

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

What does the spec say about the auto value for width?

规范对 width 的 auto 值有什么看法？

The width depends on the values of other properties. See the sections below.

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

Wahey, that's not helpful. To save you the trouble, I've found you the relevant section to our use-case, titled "calculating widths and margins", subtitled "block-level, non-replaced elements in normal flow":

哇，这没有帮助。为了省去您的麻烦，我为您找到了我们用例的相关部分，标题为“计算宽度和边距”，副标题为“正常流程中的块级非替换元素”：

The following constraints must hold among the used values of the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

以下约束必须在其他属性的使用值中保持：
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度

OK, so widthplus the relevant margin, border and padding borders must all add up to the width of the containing block (notdescendents the way heightworks). Just one more spec sentence:

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

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

如果 'width' 设置为 'auto'，则任何其他 'auto' 值变为 '0' 并且 'width' 遵循结果相等。

Aha! So in this case, 50% of width:autois 50% of the viewport. Hopefully everything finally makes sense now!

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

_Footnotes

_脚注

_{* At least, as far it matters in this case. specAll right, everything only kind of makes sense now.}

_{* 至少，在这种情况下它很重要。spec好吧，现在一切都有意义了。}

Answer 3

回答by David Martins

I think you just need to give it a parent container... even if that container's height is defined in percentage. This seams to work just fine: JSFiddle

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

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

Answer 4

回答by swider

You need to give it a container with a height. width uses the viewport as the default width

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

Answer 5

回答by Niv Kremer

Another option is to add style to div

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

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

And it means that an element is positioned relative to the nearest positioned ancestor.

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

Answer 6

回答by the code war

Without content, the height has no value to calculate the percentage of. The width, however, will take the percentage from the DOM, if no parent is specified. (Using your example) Placing the second div inside the first div, would have rendered a result...example below...

没有内容，高度没有计算百分比的值。但是，如果未指定父级，则宽度将从 DOM 中获取百分比。（使用您的示例）将第二个 div 放在第一个 div 内，会呈现结果......下面的示例......

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

The second div would be 30% of the first div's height.

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

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

提问by Web_Designer

回答by mu is too short

回答by Flimm

`height`property:

`height`财产：

`width`property:

`width`财产：

回答by David Martins

回答by swider

回答by Niv Kremer

回答by the code war

相关推荐

最近更新

标签

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

提问by Web_Designer

回答by mu is too short

回答by Flimm

heightproperty:

height财产：

widthproperty:

width财产：

回答by David Martins

回答by swider

回答by Niv Kremer

回答by the code war

相关推荐

CSS 在 Twitter Bootstrap 中更改导航栏颜色

CSS IE 网页测试。IETester 的准确度如何？

CSS Bootstrap 3 导航栏品牌颜色

继承了哪些 CSS 属性？

相关推荐

最近更新

标签

`height`property:

`height`财产：

`width`property:

`width`财产：