html - 调整 % 时 div 高度不调整？

Question

为什么以百分比表示的 div 高度不起作用，我将字体设置为一个大的 30px，但是当我将 div 高度设置为 10% 时它仍然是相同的高度？

div.ex1 {
    font: 30px arial, sans-serif;
}

div {
    height: 10%;
}

<div class="ex1">This is a paragraph. This is a paragraph.</div>

block 元素的高度应该取决于内容，所以如果我将包含 block 的高度设置为 10%，div 应该变小吗？

Answer 1

这样看吧

当你说 10% .. css 会问 10% 什么... parent ?? 好的，然后它会查看 body.. 以获得它的高度 .. 但它没有定义并且取决于 child ，但是 child 想要成为 parent 的 10% ...

所以基本上给 body 一些高度

喜欢

body {
  height: 100vh;
}

在这里阅读更多 https://www.w3.org/TR/CSS2/visudet.html#propdef-height