Tailwind CSS后台模板底部多余空白与侧边栏适配问题求助

问题原因 #

你的侧边栏在桌面端设置了md:h-screen固定高度和md:fixed固定定位，高度只会匹配浏览器视口高度，当主内容高度超出视口时，整个页面滚动，固定定位的侧边栏自然不会跟着内容拉伸。

解决方法 #

方案1（推荐：侧边栏固定悬浮，体验更优）

修改Main组件里的主内容外层div，给它加上overflow-y-auto，让超出的内容仅在主内容容器内滚动，整个页面高度始终等于视口高度，侧边栏的h-screen就能始终占满高度：

<div className="flex-1 bg-gray-100 overflow-y-auto">

方案2（侧边栏跟随页面整体滚动）

如果需要侧边栏和主内容高度同步、一起滚动，可以修改Sidebar组件的定位和高度配置：

1. 删掉侧边栏最外层div的md:relative md:h-screen，替换为md:h-full
2. 删掉侧边栏内部div的md:fixed md:left-0 md:top-0 md:w-48相关固定定位属性

修改后Sidebar组件的根结构如下：

return (
  <div className="bg-gray-800 shadow-xl h-16 fixed bottom-0 mt-12 md:h-full z-10 w-full md:w-48">
    <div className="md:mt-12 content-center md:content-start text-left justify-between">
      {/* 原有菜单代码不变 */}
    </div>
  </div>
)

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