Question

我有一个div，其子p标签包含文字。

我希望p标记的高度只有70%。

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

然后我想我可以添加15％margin-top或添加15％padding-top（对父母）以垂直居中父div中的p标签...但我发现我需要把它设置为类似3%的......为什么会这样？

Answer 1

然后我想我可以添加15％的margin-top或者添加15％的padding-top （对父母来说）将div中的p标签垂直居中......但是我发现我需要把它设置为3％......为什么会这样？

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

根据父母的身高不计算上边距和下边距，这就是为什么15％margin-top不是容器高度的15％而是容器宽度的15％。

解决方法：

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

Answer 2

您可以使用定位来实现这一目标。因此，不要设置p元素的高度，而是允许定位为您执行此操作（通过添加bottom: 15%;和top:15%;）。这样可以让你获得70％的内容（我认为，根据需要）：

＆＃13;

div{
  height:200px;
  background:yellow; 
  position:relative;
  
}

p{
  position:absolute;  
  width:100%;
  background:red;
  top:15%;
  bottom:15%;
  overflow:auto;
}

＆＃13;

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

＆＃13;

css的％高度是什么意思

2 个答案: