TailwindCSS使用calc实现Header时高度计算异常问题

问题根源 #

外层容器的h-full没有正确获取到父级元素的高度，导致calc(100% - 68px)的计算基准并非你预期的完整高度，最终内容区被压缩到默认最小高度（约150px）。

两种可行解决方案 #

方案1：修复父级高度依赖，保留calc写法 #

先确保所有上级容器（包括html、body）都设置明确高度，让外层容器的h-full能正确继承高度：

<html class="h-full">
<body class="h-full">
  <div class="flex flex-col h-full">
    <header class="h-[68px]">Header内容</header>
    <main class="h-[calc(100%-68px)] overflow-auto">内容区内容</main>
  </div>
</body>
</html>

方案2：用flex布局的flex-1自动填充剩余空间（更推荐） #

既然外层已使用flex flex-col，无需手动计算高度，给内容区添加flex-1即可自动占据Header之外的全部剩余空间，规避calc的基准问题：

<div class="flex flex-col h-full">
  <header class="h-[68px]">Header内容</header>
  <main class="flex-1 overflow-auto">内容区内容</main>
</div>

额外注意点 #

• 如果外层容器不是直接放在body下，需确保它的所有父级容器都设置了h-full或明确高度值，否则h-full会失效；
• 添加overflow-auto可让内容区在超出高度时自动出现滚动条，避免内容溢出容器。

内容的提问来源于stack exchange，提问作者MInH THiỆn