Tailwind+CSS头部-导航-底部-内容布局：高度填充异常问题

你的核心问题是中间横向布局容器内的导航栏和内容区未填满垂直剩余空间，原因是子元素未继承容器高度，且部分冗余属性导致布局溢出。以下是修正方案：

修正后的完整代码 #

<div class="min-h-screen w-full flex flex-col bg-slate-400">
  <div class="h-32 bg-red-400 flex items-center justify-center">Title</div>
  <div class="flex flex-1 flex-row">
    <div class="w-32 bg-yellow-300 flex items-center justify-center">Nav</div>
    <div class="flex-1 bg-blue-400 flex items-center justify-center">Content</div>
  </div>
  <div class="h-32 bg-green-400 flex items-center justify-center">Footer</div>
</div>

关键修改说明 #

• 最外层容器：用min-h-screen替代min-h-full，直接基于视口高度确保布局占满可用空间，避免依赖父元素高度的不确定性。
• 中间横向容器：
  • 移除h-auto和w-screen：flex-1已让它自动占据header和footer之外的剩余垂直空间，w-screen会导致宽度溢出父容器（父容器已是w-full）。
  • 内部子元素：导航栏设固定宽度w-32，内容区用flex-1占剩余宽度；借助flex容器默认的items-stretch属性，子元素会自动填满容器垂直高度，无需额外设置h-full（显式添加也可）。
• Header/Footer：移除w-screen，父容器w-full已确保它们铺满宽度，固定高度h-32保持不变。

效果验证 #

修正后：

• Header和Footer保持固定高度，始终显示在页面顶部和底部
• 导航栏固定宽度，与内容区一起填满header和footer之间的全部垂直空间
• 整个布局无溢出，完全适配视口高度

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