HTML/CSS与TailwindCSS滚动条异常：页面整体滚动问题排查

你的问题根源是：最外层容器用了h-screen，但导航栏的py-8垂直内边距会让整个容器的实际高度超过屏幕高度，所以页面出现了和导航栏内边距高度一致的滚动条。要实现预期的布局，需要用flex垂直布局来精确分配高度：

修改要点： #

• 外层容器改为flex flex-col h-screen，让子元素垂直排列，总高度锁定为屏幕高度
• 主内容的flex容器添加flex-1 overflow-hidden，占满导航栏剩余的全部高度，避免内容溢出到外层页面
• 左侧卡片列表保留h-full overflow-y-scroll，让它在自己的高度范围内独立滚动
• 右侧地图改用flex-1，自动填充主内容区剩余宽度

修改后的完整代码： #

<link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex flex-col h-screen bg-yellow-400">
  <div class="py-8">
    my navbar
  </div>
  <div class="flex flex-1 overflow-hidden">
    <div class="w-2/5 h-full flex flex-col gap-6 justify-start items-center overflow-y-scroll p-8 bg-blue-400">
      <div class="w-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
      <div class="w-full min-w-[300px] min-h-[100px] bg-green-400">Card</div>
    </div>
    <div class="flex-1 bg-red-400">map</div>
  </div>
</div>

细节说明： #

• flex flex-col h-screen：外层容器垂直分布子元素，总高度严格等于屏幕高度，不会被子元素的内边距撑开
• flex-1：主内容区自动填充导航栏下方的剩余空间，确保整体高度不超出屏幕
• overflow-hidden：把主内容区的溢出限制在内部，避免触发外层页面的滚动条，让左侧列表自己处理滚动
• 右侧地图用flex-1替代w-full，是因为左侧已经占了w-2/5，flex-1会自动计算剩余宽度，布局更灵活

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