使用TailwindCSS的h-screen(100vh)属性时如何避免出现Y轴滚动条

问题根因 #

原有代码中主内容区使用h-screen属性固定占满100%视口高度，再叠加上方导航栏、下方页脚的高度后，页面总高度超过视口高度，因此触发了不必要的Y轴滚动条。

解决方法 #

调整整体页面布局为纵向弹性布局，让主内容区自动填充剩余视口空间，不需要固定高度：

• 最外层容器设置min-h-screen flex flex-col，保证页面最小高度等于视口高度，内部元素纵向排列
• 主内容区移除h-screen属性，新增flex-1属性，自动占满导航、页脚之外的所有剩余空间
• 若未引入Tailwind默认基础样式，需手动给body添加m-0清除默认外边距

修改后完整代码 #

<div class="min-h-screen flex flex-col">
  <h2 class="text-3xl text-center my-10">some text</h2>
  <div class="flex flex-1 justify-center items-center bg-gray-500">
    <div class="text-center text-green-500 text-3xl">
      <svg class="w-40 h-40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      THANK YOU!
    </div>
  </div>
  <div class="text-center my-10">beautiful footer</div>
</div>

调整后主内容区依然保持flex的居中属性，可正常实现内容的水平垂直居中，同时页面高度刚好适配视口，不会出现多余滚动条。若后续主内容区内容长度超过剩余视口高度，页面会自动撑开出现滚动条，不会挤压导航和页脚的展示。

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