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%。
- 我认为您的意思是容器高度；)
- @jbutler483 没有根据父母的宽度计算所有百分比边距和填充，请参阅规范
- 感谢您的回答……什么白痴决定它应该基于宽度？那是愚蠢的！
- @web-tiki：我实际上并不知道：3。请注意，我并没有真正使用边距(更多的定位/伪元素)。所以为此欢呼:)
- @RISCOS3我不知道是谁决定的，但它确实允许为元素保持固定的纵横比。
- @jbutler483 请注意，有一些例外情况，例如 flexbox 布局。
您可以使用定位来实现这一点。因此，不要设置 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{ |
|
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> |
- 感谢您的回复……您和 web-tiki 都很有帮助；)
- @RISCOS3：Web-tiki 知道它背后的原因，我坚持我所知道的(即”变通”)。所以总而言之，我认为 Web-tiki 值得那个绿色勾号。
来源：https://www.codenong.com/28023323/
