Tailwind CSS高度样式不生效：React中导航栏与Footer高度设置无效

尝试将导航栏（NavBar）和页脚（Footer）设置为占全屏高度的容器div的1/5，但使用h-*类样式始终不生效，相关代码如下：

import { useEffect } from "react";
import React from "react";

function App() {
  useEffect(() => {
    console.log("hello world");
  }, []);
  return (
    <div className="flex flex-col w-full h-full">
      <div className="bg-gray-300 flex justify-center items-center h-1/5 relative">
        <p className="m-auto text-5xl">NavBar</p>
      </div>
      <div className="h-full"></div>
      <footer className="bg-gray-300 flex text-5xl justify-center items-center w-full h-1/5 fixed bottom-0">
        <p className="m-auto text-5xl">Footer</p>
      </footer>
    </div>
  );
}

export default App;

问题原因 #

1. 根元素高度未设置：最外层容器的h-full依赖父元素（html、body、#root）的高度，但这些元素默认没有全屏高度，导致容器的h-full不生效，子元素的h-1/5自然无法基于全屏高度计算。
2. 页脚定位脱离流：页脚使用fixed定位，会脱离文档流，不受父容器的flex布局约束，h-1/5无法基于父容器高度生效。
3. 中间区域高度冲突：中间div用h-full会试图占满父容器高度，和导航栏、页脚的高度叠加后超出容器，导致布局异常。

解决方案 #

步骤1：设置根元素全屏高度 #

在全局样式文件（如index.css）中添加：

html, body, #root {
  height: 100%;
  margin: 0;
}

步骤2：调整组件布局代码 #

移除页脚的fixed定位，使用flex布局的flex-grow让中间内容区自动填充剩余空间：

import { useEffect } from "react";
import React from "react";

function App() {
  useEffect(() => {
    console.log("hello world");
  }, []);
  return (
    <div className="flex flex-col w-full h-full">
      {/* 导航栏：占父容器1/5高度 */}
      <div className="bg-gray-300 flex justify-center items-center h-1/5">
        <p className="text-5xl">NavBar</p>
      </div>
      {/* 中间内容区：自动填充剩余高度 */}
      <div className="flex-grow"></div>
      {/* 页脚：占父容器1/5高度 */}
      <footer className="bg-gray-300 flex justify-center items-center w-full h-1/5">
        <p className="text-5xl">Footer</p>
      </footer>
    </div>
  );
}

export default App;

说明 #

• 根元素设置height:100%后，最外层容器的h-full能继承到全屏高度，子元素的h-1/5会基于这个高度计算。
• 移除fixed让页脚回到flex布局流中，确保h-1/5生效。
• flex-grow属性让中间区域自动填充导航栏和页脚之外的剩余空间，避免高度溢出问题。

内容的提问来源于stack exchange，提问作者João Pedro