将父 div 设置为 min-h-screen 如何影响其子项？

Question

我无法让我的 React 应用程序填满整个屏幕，同时又无法正确调整其子项的大小。 为什么这有效：

<div className="h-screen bg-blue-500">
    <div className="h-1/2 bg-red-500"></div>
</div>

这不是：

<div className="min-h-screen bg-blue-500">
    <div className="h-1/2 bg-red-500"></div>
</div>

我查看了文档和其他帖子，但没有真正触及这个特定问题。 此外，尽管 h-screen 使孩子们的行为符合预期，但当需要滚动时它不会填满整个屏幕。 我很感激任何输入，谢谢。

Answer 1

这就是 CSS 的工作原理。 Tailwind class min-h-screen等同于min-height: 100vh; 而 class h-1/2等于height: 50% 。 您不能在没有明确高度的容器内使用百分比作为高度（即，如果它的高度是自动的，那么它取决于其中的内容）。

CSS 规范中的正式定义说

[t] 百分比是根据生成的框的包含块的高度计算的。 如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素不是绝对定位的，则该值计算为“auto”。

---

解决此问题的一种方法是将grid class 添加到父元素。 CSS 网格容器具有固有的高度和宽度，因此您的height: 50% child 可以使用网格的固有高度来计算其相对高度。

如果您的容器只有一个 div（例如您的示例），这很好。 但是，当您在一个或多个附加子容器中添加更多内容时，空的 div 将折叠起来。

如果这不是你想要的行为，并且你总是希望一个容器占父容器的 50%，即使它溢出了最小高度，那么你可以使用grid-template-rows: 1fr 1fr （或者在 Tailwind 的情况下grid-rows-2转换为repeat(2, minmax(0, 1fr)) ) 而不是孩子的高度：

<div className="min-h-screen bg-blue-500 grid grid-rows-2">
  <div className="bg-red-500"></div>
  <div>
    <p>Add as much or as little content here as you like.</p>
    <p>Both child divs will always have the same height of 50% relative to the parent</p>
  </div>
</div>