Tailwind CSS浅蓝色div无法占满全屏及高度失效问题

问题本质 #

• 你用的max-h-full、min-h-full这类Tailwind高度类，本质是CSS的百分比高度，这类高度的计算必须依赖父元素有明确的高度值。但默认状态下html和body没有设置高度，所以full（即height: 100%）找不到参照，自然无法生效。
• 深蓝色div能显示是因为min-h-10是固定高度（对应2.5rem），不需要依赖父级高度，空元素也能撑起高度。

解决步骤 #

1. 给根元素设置高度参照 #

先给html和body添加全屏高度，让子元素有计算基准：

<html class="h-full">
<body class="h-full">
    <div class="bg-blue-500 min-w-full min-h-10"></div>
    <div class="bg-blue-400 h-full w-1/4">a</div>
</body>
</html>

2. 根据需求选择高度方案 #

• 如果要让浅蓝色div占满整个视口：直接用min-h-screen（基于浏览器视口高度，无需依赖父级）：

  <div class="bg-blue-400 min-h-screen w-1/4">a</div>
  

• 如果要让浅蓝色div占满深蓝色div下方的剩余空间：用Flex布局实现自适应填充：

  <body class="min-h-screen flex flex-col">
      <div class="bg-blue-500 min-w-full min-h-10"></div>
      <div class="bg-blue-400 flex-1 w-1/4">a</div>
  </body>
  

  这里flex-1会自动填充Flex容器的剩余空间，min-h-screen确保body至少占满视口高度。

注意事项 #

• 不要用max-h-full来实现全屏高度，它的作用是限制元素最大高度为父级高度，不是让元素占满高度。
• 当需要元素填充剩余空间时，Flex布局的flex-1是Tailwind中最直接的方案。

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