为何设置h-full/height:100%无法让div填满标题与页脚间空白？

DevOps 小满

2026-8-6

解决方案

要实现副标题区域填满标题与页脚的空白，同时让页脚固定在页面底部，只需调整Flex布局的层级和属性即可解决，具体修改如下：

核心调整点

给包裹标题和副标题的黄色容器（.bg-yellow-200）添加 flex flex-col flex-1：
- flex flex-col 让容器内部元素垂直排列
- flex-1 使该容器占据最外层红色div除去footer后的全部可用高度
给副标题所在的靛蓝色容器（.bg-indigo-500）添加 flex-1，让它在黄色容器内部占据除去标题区域后的剩余高度

修改后的完整代码

export default function ASD() {
  return (
    <div className="flex flex-col justify-start mx-auto w-9/12 min-h-screen bg-red-300 text-center">
      <div className="bg-yellow-200 flex flex-col flex-1">
        <div className="bg-blue-200 text-6xl">
          <h1>Title</h1>
        </div>
        <div className="bg-indigo-500 text-3xl flex-1">
          <h1>Subtitle</h1>
        </div>
      </div>
      <footer className="mt-auto bg-green-200">Footer</footer>
    </div>
  );
}