Tailwind CSS Grid布局中绝对定位盒子无法占满父容器高度如何解决

问题根源 #

这既不是Tailwind CSS的问题也不是CSS Grid的问题，属于层级高度继承的逻辑问题：

• CSS Grid布局默认会将所有列的直接子元素（你代码中三个带bg-blue-300的列容器）拉伸为等高，这部分运行符合预期
• 但列容器内部的.relative元素没有设置高度占满父列容器，它的高度仅由自身内部的<p>内容高度决定
• 你设置了h-full的绝对定位白色盒子，高度是相对于最近的relative父元素计算，自然只能和当前列的内容高度对齐，无法和最高列保持等高

解决方法 #

只需要给每个列容器内部的.relative元素加上h-full类，让它先撑满已经等高的蓝色列父容器，内部绝对定位的白色盒子就能继承到统一的高度。

修改点如下，将原代码中三个列内的公共结构：

<div class="relative" style="min-height:150px;">

统一替换为：

<div class="relative h-full" style="min-height:150px;">

即可实现所有白色盒子占满所在列的完整高度，红色圆形也会在列垂直方向居中对齐。

内容的提问来源于stack exchange，提问作者Amir Rahman