为什么有时候写 calc(100vh-100px) 有效果，但是 h-full 没有效果

这是因为 CSS 中 height: 100% (对应 Tailwind 的 h-full) 和 height: 100vh 的工作方式不同：

h-full (height: 100%) 是相对于父元素的高度来计算的。如果父元素没有明确设置高度，那么 h-full 将不会生效。

calc(100vh-100px) 是直接基于视窗高度（viewport height）来计算的，不依赖于父元素的高度。这里：
100vh 表示整个视窗的高度
-100px 从中减去 100 像素

这个计算是绝对的，不依赖于父元素

要让 h-full 生效，您需要确保所有父元素都有明确的高度。

参考代码

<ContentLayout title="New Post" className="bg-green-500 p-0 h-screen">
   <div className="h-full bg-blue-500"></div>
 </ContentLayout>

给 ContentLayout 添加了 h-screen（等于 100vh）

现在子元素的 h-full 就可以正常工作了，因为它有了一个具有明确高度的父元素

两种方法都可以实现效果，选择哪种方式取决于您的具体需求：

如果需要相对于父元素的高度，使用 h-full

如果需要相对于视窗的高度，使用 calc(100vh-100px) 或 h-screen