Bootstrap+ReactJS侧边栏无法占满100%页面高度问题求助

你的代码核心问题是固定定位元素脱离父级布局流，加上根元素默认未强制铺满视口高度，导致侧边栏视觉上没占满页面高度。以下是具体修复方案：

1. 先确保根元素铺满视口 #

默认情况下html和body不会自动占满100%视口高度，先添加基础样式：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 调整侧边栏布局结构 #

方案一：移除固定定位（推荐，保持流式布局） #

把min-vh-100从内部固定定位的div移到外层侧边栏容器（col-auto层级），同时去掉内部div的position-fixed：

<div className="container-fluid">
  <div className="row flex-nowrap">
    <!-- 将min-vh-100添加到侧边栏容器 -->
    <div className="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark min-vh-100">
      <div className="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white">
        <!-- 侧边栏内容 -->
      </div>
    </div>
    <!-- 主内容区 -->
    <div className="col">
      <!-- 页面主体内容 -->
    </div>
  </div>
</div>

这种方式让侧边栏容器直接继承视口高度，和主内容区保持正常栅格布局，不会出现遮挡问题。

方案二：保留固定定位（适合侧边栏固定不滚动的场景） #

如果必须使用固定定位，给内部div加上top-0和bottom-0（Bootstrap定位工具类）强制上下贴边，同时继承父级宽度，还要给主内容区加左侧间距避免被遮挡：

<div className="container-fluid">
  <div className="row flex-nowrap">
    <div className="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
      <div className="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white position-fixed top-0 bottom-0" style={{width: "inherit"}}>
        <!-- 侧边栏内容 -->
      </div>
    </div>
    <!-- 主内容区添加对应间距，适配侧边栏宽度 -->
    <div className="col ms-md-3 ms-xl-2">
      <!-- 页面主体内容 -->
    </div>
  </div>
</div>

3. 排查额外样式干扰 #

用浏览器开发者工具检查侧边栏及父元素的盒模型，确认是否有额外的margin或padding挤压高度，或是自定义样式覆盖了Bootstrap的布局类。

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