使用Tailwind CSS布局未达预期，寻求修复方案

问题分析 #

现有代码用grid-rows-3将屏幕高度均分3份，无法实现bar、footer固定h-14、中间区域占满剩余高度的需求；同时存在React中class和className混用、footer布局位置错误的问题。

修复代码 #

export default function MainComp() {
  return (
    <div className='h-screen grid grid-rows-[h-14_1fr_h-14] grid-cols-2 gap-1 box-border'>
      <div className="border-2 border-red-700 col-span-2">web bar</div>
      <div className="border-2 border-blue-700 row-span-2">nav bar</div>
      <div className="border-2 border-lime-800">contents</div>
      <div className="border-2 border-yellow-600">footer</div>
    </div>
  )
}

关键调整说明 #

• Grid行规则：用grid-rows-[h-14_1fr_h-14]明确行高，第一、三行固定h-14，第二行用1fr占满剩余垂直空间，精准匹配布局需求。
• 修正属性名：把所有class替换为React规范的className。
• 移除冗余样式：footer无需额外加h-14，grid行规则已定义该行高度。
• 添加盒模型控制：box-border避免边框和gap导致整体高度超出h-screen，保证布局完全适配屏幕。

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