css中的%高度是什么意思

What does % height in css mean

我有一个 div,其子 p 标签包含文本。

我希望 p 标记的高度仅为 70%

这行得通,它只是父级高度的 70%。然后我在 p 标签上使用 "overflow: hidden;" 来隐藏额外的内容。

然后我想我可以添加 15% margin-top 或添加 15% padding-top (到父级)以垂直居中父 div 中的 p 标签......但我发现我需要将它设置为像 3%.... 怎么会?


Then I thought I could just add 15% margin-top or add 15% padding-top
(to the parent) to vertically center the p tag in the div... but I
find I need to set it to something like 3%.... how come?

因为百分比边距和填充(顶部、右侧、底部和左侧)是根据包含块的宽度计算的。

顶部和底部边距不是根据父级的高度计算的,这就是为什么 15% margin-top 不是容器高度的 15% 而是容器宽度的 15%。

解决方法:

您可以使用绝对或相对定位,因为父级具有固定的高度,并且百分比的最大值是根据父级的高度计算的,因此 top:15%; 将是父级高度的 15%。


您可以使用定位来实现这一点。因此,不要设置 p 元素的高度,而是允许定位为您执行此操作(通过添加 bottom: 15%;top:15%;)。这将为您提供 70% 的内容(我相信,如您所愿):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div{
  height:200px;
  background:yellow;
  position:relative;
 
}

p{
  position:absolute;  
  width:100%;
  background:red;
  top:15%;
  bottom:15%;
  overflow:auto;
}
1
2
3
  <p>
i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p.
  </p>