如何让页面主内容自适应填充屏幕剩余空间（无需min-h-screen）

需求是构建一个包含固定导航栏（始终可见）、路由内容插槽和页脚的基础布局，核心要求：

• 当路由内容高度小于屏幕高度时，内容区域高度自动等于「屏幕高度 - 导航栏高度 - 页脚高度」，页脚固定在屏幕底部
• 当路由内容高度超过屏幕高度时，内容区域随内容自然展开，页脚被推到页面最下方

解决方案：使用Flexbox布局实现自适应高度 #

通过给外层容器设置弹性布局，让内容区域自动填充剩余空间，无需手动计算高度。

完整代码示例：

<!-- 外层容器：确保至少占满屏幕高度，子元素垂直排列 -->
<div class="min-h-screen flex flex-col">
  <!-- 固定导航栏 -->
  <nav class="sticky top-0 flex items-center justify-between border-b border-slate-200 bg-white py-6 px-8">
    <span class="text-2xl font-semibold text-slate-800">Logo</span>
    <button>toggle menu</button>
  </nav>

  <!-- 路由内容插槽：自动填充导航和页脚之外的剩余空间 -->
  <section class="flex-1">Sample route content goes here</section>

  <!-- 页脚组件 -->
  <footer class="flex items-center justify-end space-x-8 border-t border-slate-200 py-6 px-8">footer links to the right side</footer>
</div>

原理说明： #

• 外层容器的min-h-screen保证布局至少占满整个视口高度，flex flex-col让子元素沿垂直方向排列
• 内容区域的flex-1属性会自动获取容器中除导航和页脚外的剩余空间：
  • 当内容高度不足时，flex-1会撑开内容区域，让页脚固定在屏幕底部
  • 当内容高度超过剩余空间时，内容区域会随内容自然延伸，页脚被推到页面最底部
• 导航栏的sticky top-0保持始终可见，不受内容滚动影响

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