css 中的百分比高度是什么意思

Question

我有一个 div，其 child p 标签包含文本。

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

这有效，它只有 parent 高度的 70%。然后我在 p 标签上使用“overflow: hidden;”来隐藏额外的内容。

然后我想我可以只添加 15% margin-top 或添加 15% padding-top（到 parent）以使 p 标签在 parent 中垂直居中div...但我发现我需要将其设置为类似3%...怎么会这样？

Answer 1

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?

因为计算了百分比边距和边距（顶部、右侧、底部和左侧）according to the containing blocks width.

顶部和底部边距不是根据父级的高度计算的，因此 15% margin-top 不是容器高度的 15% 而是容器宽度的 15%。

解决方法：

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

Answer 2

您可以使用定位来实现这一点。因此，与其设置 p 元素的高度，不如让定位为您完成（通过添加 bottom: 15%; 和 top:15%;）。这将使您获得 70% 的内容（我相信这是需要的）：

div{
  height:200px;
  background:yellow; 
  position:relative;
  
}

p{
  position:absolute;  
  width:100%;
  background:red;
  top:15%;
  bottom:15%;
  overflow:auto;
}

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

css 中的百分比高度是什么意思

What does % height in css mean

css

height

percentage