This question already has an answer here:

这个问题已经有了答案:

Percentage Height HTML 5/CSS 4 answers
百分比高度HTML 5/CSS 4答案

How come a percentage value for height doesn’t work but a percentage value for width does?

为什么身高的百分比值不起作用，宽度的百分比值起作用?

例如:

<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 #working ends up being 80% of the viewport, but the height of #not-working ends up being 0.

#工作的宽度为viewport的80%，但不工作的高度为0。

6 个解决方案

#1

287

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>

#inner will grow to be tall enough to contain the paragraph and #outer will grow to be tall enough to contain #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.

当您将高度或宽度指定为百分比时，这是相对于元素父元素的百分比。在宽度的情况下，除非另有说明，所有块元素的宽度都与它们的父元素一样，一直到;因此，块元素的宽度与它的内容无关，它说宽度:50%产生一个定义良好的像素数量。

However, the height of a block element depends on its content unless 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.

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

#2

A percentage value in a height property has a little complication, and the width and height properties actually behave differently to each other. Let me take you on a tour through the specs.

高度属性中的百分数有一些复杂之处，而宽度和高度属性实际上是不同的。让我带你参观一下规格。

`height` property:

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

让我们看看CSS Snapshot 2010对身高的说明:

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 static position, it's:

包含块是什么?这有点复杂，但是对于默认静态位置的普通元素，它是:

the nearest block container ancestor box

最近的块容器原型框

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

或者用英语来说，它的父框。(知道固定和绝对位置的情况也很值得，但我忽略了这一点，以保持这个答案的简短。)

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 #aa is #a, and so on for #b and #bb. So far, so good.

在这个示例中，包含#aa的块是#a， #b和#bb也是如此。到目前为止还好。

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

下一个句子规范的高度是并发症这个答案我在介绍中提到的:

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:200px is 100px in the case of #aa
高度的50%:200px = 100px，以#aa为例
But 50% of height:auto is auto, which is 0px in the case of #bb since there is no content for auto to expand to
但50%的高度:汽车是汽车,它是0 px的# bb由于没有内容扩大到汽车

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` property:

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

那么宽度也是一样的吗?让我们来看看规范:

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 width instead of 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:200px is 100px in the case of #cc
宽度的50%:对于#cc, 200px = 100px
50% of width:auto is 50% of whatever width:auto ends up being, unlike height, there is no special rule that treats this case differently.
宽度的50%:自动就是宽度的50%:自动最终是，不像高度，没有特殊的规则来区别对待这种情况。

Now, here's the tricky bit: auto means different things, depending partly on whether its been specified for width or height! For height, it just meant the height needed to fit the contents*, but for width, auto is 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意味着不同的东西，部分取决于它是被指定为宽度还是高度!对于高度来说，它仅仅意味着适合内容的高度*，但是对于宽度来说，auto实际上要复杂得多。您可以从本例中的代码片段中看到，它最终成为了viewport的宽度。

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

关于宽度的自动值说明了什么?

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

Wahey,这不是有益的。为了避免麻烦，我已经为您找到了我们用例的相关部分，标题为“计算宽度和边距”，副标题为“块级，正常流中不可替换的元素”:

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- wide -width' + 'width -right' + 'border-right ' + 'border-right ' + ' + 'margin-right' =包含块的宽度

OK, so width plus the relevant margin, border and padding borders must all add up to the width of the containing block (not descendents the way height works). Just one more spec sentence:

宽度+相关保证金,边界和填充边界都必须加起来包含块的宽度(不是后代高度的工作方式)。只有一个更规范的句子:

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:auto is 50% of the viewport. Hopefully everything finally makes sense now!

啊哈!在这种情况下，50%的宽度auto是50%的viewport。希望现在一切都有意义了!

_Footnotes

脚注

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

至少，就这件事而言，这很重要。好吧，现在一切都有意义了。

#3

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%; 
}

#4

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

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

#5

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.

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

#6

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

#1

287

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>

#inner will grow to be tall enough to contain the paragraph and #outer will grow to be tall enough to contain #inner.

#内将长到足够高包含段落和#外将长到足够高包含#内。

#2

高度属性中的百分数有一些复杂之处，而宽度和高度属性实际上是不同的。让我带你参观一下规格。

`height` property:

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

让我们看看CSS Snapshot 2010对身高的说明:

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 static position, it's:

包含块是什么?这有点复杂，但是对于默认静态位置的普通元素，它是:

the nearest block container ancestor box

最近的块容器原型框

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

或者用英语来说，它的父框。(知道固定和绝对位置的情况也很值得，但我忽略了这一点，以保持这个答案的简短。)

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 #aa is #a, and so on for #b and #bb. So far, so good.

在这个示例中，包含#aa的块是#a， #b和#bb也是如此。到目前为止还好。

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

下一个句子规范的高度是并发症这个答案我在介绍中提到的:

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:200px is 100px in the case of #aa
高度的50%:200px = 100px，以#aa为例
But 50% of height:auto is auto, which is 0px in the case of #bb since there is no content for auto to expand to
但50%的高度:汽车是汽车,它是0 px的# bb由于没有内容扩大到汽车

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` property:

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

那么宽度也是一样的吗?让我们来看看规范:

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 width instead of 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:200px is 100px in the case of #cc
宽度的50%:对于#cc, 200px = 100px
50% of width:auto is 50% of whatever width:auto ends up being, unlike height, there is no special rule that treats this case differently.
宽度的50%:自动就是宽度的50%:自动最终是，不像高度，没有特殊的规则来区别对待这种情况。

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

关于宽度的自动值说明了什么?

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

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

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- wide -width' + 'width -right' + 'border-right ' + 'border-right ' + ' + 'margin-right' =包含块的宽度

OK, so width plus the relevant margin, border and padding borders must all add up to the width of the containing block (not descendents the way height works). Just one more spec sentence:

宽度+相关保证金,边界和填充边界都必须加起来包含块的宽度(不是后代高度的工作方式)。只有一个更规范的句子:

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:auto is 50% of the viewport. Hopefully everything finally makes sense now!

啊哈!在这种情况下，50%的宽度auto是50%的viewport。希望现在一切都有意义了!

_Footnotes

脚注

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

至少，就这件事而言，这很重要。好吧，现在一切都有意义了。

#3

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%; 
}

#4

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

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

#5

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.

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

#6

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

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

第二个div将会是第一个div的30%。

秒客网

为什么百分比高度不工作?(复制)

6 个解决方案

#1

#2

`height` property:

`width` property:

#3

#4

#5

#6

#1

#2

`height` property:

`width` property:

#3

#4

#5

#6

相关文章

为什么百分比高度不工作?(复制)

6 个解决方案

#1

#2

height property:

width property:

#3

#4

#5

#6

#1

#2

height property:

width property:

#3

#4

#5

#6

相关文章

`height` property:

`width` property:

`height` property:

`width` property: