CSS - 为什么百分比高度不起作用？ [重复]-Java 学习之路

204

这个问题在这里已有答案：

Percentage Height HTML 5/CSS 6个答案

为什么 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 .

6 回答

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

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

回复于 2024-04-29T09:58:47+08:00

9

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

回复于 2024-04-29T09:58:47+08:00
311
另一种选择是为div添加样式
```
<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
 //to be scrolled 
</div>
```
这意味着元素相对于最近的定位祖先定位 .
回复于 2024-04-29T09:58:47+08:00
5
块元素的高度默认为块内容的高度 . 所以，给出这样的东西：
```
<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div>
</div>
```
#inner 将变得足够高以包含段落，并且 #outer 将变得足够高以包含 #inner .

当您将高度或宽度指定为百分比时，'s a percentage with respect to the element'的父级 . 在宽度的情况下，除非另有说明，否则所有块元素都与其父元素一样宽，直到 <html> ;因此，块元素的宽度与其内容无关，并且 width: 50% 产生明确定义的像素数 .

但是，除非指定特定高度，否则块元素 depends on its content 的高度 . 所以父母和孩子之间有关于身高的反馈，并说 height: 50% 不会产生一个明确定义的值，除非你通过给父元素一个特定的高度打破反馈循环 .
回复于 2024-04-29T09:58:47+08:00
103
height 属性中的百分比值有一点复杂性， width 和 height 属性实际上彼此表现不同 . Let me take you on a tour through the specs.

height属性：

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

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

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

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

什么是containing block？它有点复杂，但对于默认 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 规范的下一句是我在这个答案的引言中提到的复杂性：

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

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

在 #aa 的情况下，_179859_的
- 50％是100px
- 但 height:auto 的50％是 auto ，在 #bb 的情况下是0px，因为没有 auto 的内容扩展到
正如规范所说，包含块是否已经绝对定位也很重要，但让我们继续 width .

width属性：

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

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

看一下这些熟悉的例子，从前面的调整来改变 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>
```
在 #cc 的情况下，_179872_的
- 50％是100px
  _179874_的50％是 width:auto 最终的50％，与 height 不同，没有特殊的规则可以区别对待这种情况 .
现在，这里是棘手的一点： auto 意味着不同的东西，部分取决于它是否被指定为 width 或 height ！对于 height ，它只是意味着适合内容*所需的高度，但对于 width ， auto 实际上更复杂 . 您可以从代码片段中看到，在这种情况下，它最终成为视口的宽度 .

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

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

Wahey，'s not helpful. To save you the trouble, I'已经找到了我们用例的相关部分， Headers 为"calculating widths and margins"，副 Headers 为"block-level, non-replaced elements in normal flow"：

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

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

如果'width'设置为'auto'，则任何其他'auto'值变为'0'，并且'width'跟随得到的相等 .

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

脚注

*至少，在这种情况下，重要的是 . 规范好吧，现在一切都有道理 .
回复于 2024-04-29T09:58:47+08:00
7
没有内容，高度没有值来计算百分比 . 但是，如果未指定父级，宽度将占用DOM的百分比 . （使用你的例子）将第二个div放在第一个div中，会产生一个结果......下面的例子......
```
<div id="working">
  <div id="not-working"></div>
</div>
```
第二个div将是第一个div高度的30％ .
回复于 2024-04-29T09:58:47+08:00

CSS - 为什么百分比高度不起作用？ [重复]

6 回答

height属性：

width属性：

相关问题