视口高度的父元素内的子元素百分比高度不起作用。

Question

3

我在视口中将父元素的高度设置为90vh，并将子元素的高度设置为90%，但是这个元素没有占据这么多空间，只显示一条线。我对父元素的高度感到困惑，因此子元素必须与其相应。

<div className="min-h-[80vh]">
  <div className="h-[90%]">test</div>
</div>

- Adarsh Raj

你在父元素上设置了position:relative吗？ - Garr Godfrey

而你如何知道元素有多大？在div中添加边框以查看它们的大小。 - Garr Godfrey

在CSS中，方括号被用作属性选择器，因此如果你的类名实际上包含它们，就像你在这里展示的那样，那么它将无法工作。 - 3in0

1

百分比高度需要以高度为参考，而不是最小高度。 - Temani Afif

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zach Jensz · Answer 1

有两个问题阻止了您的代码实现您想要的功能：

类名不能包含某些字符，比如百分号和用户3in0提到的方括号，这可能会与CSS属性选择器混淆。
百分比高度是基于父元素的高度计算的，但不包括其最小/最大高度在内。我假设您正在使用min-height，因为类名中有这个词，所以您的90%子元素高度将是auto（初始/默认值）的90％。Auto本质上意味着“您需要的任何高度”- auto的90％= auto。

.min-h-80vh {
  background-color: seagreen;
  height: 80vh;
}

.h-90 {
  background-color: coral;
  height: 90%;
}

<div class="min-h-80vh">
  <div class="h-90">test</div>
</div>