Bootstrap5场景下实现侧边栏100%页面高度并消除与footer的底部间距

解决方案 #

你可以直接用Bootstrap 5原生的弹性布局工具类实现需求，完全不需要修改bottom属性或者使用负margin，避免出现额外间距问题，具体修改步骤如下：

• 第一步：给html、body标签统一添加Bootstrap自带的h-100类，确保根元素占满整个视口高度，如果你已经自定义了全局样式，也可以直接加：

html, body {
  height: 100%;
}

• 第二步：找到包裹整个dashboard结构的最外层父元素（包含侧边栏、主内容区、footer的容器），给它添加d-flex flex-column h-100类，将其设置为垂直方向的弹性布局，且占满全高。
• 第三步：找到侧边栏和主内容区所在的row容器，给它添加flex-grow-1类，这个类会让当前行自动填充外层弹性容器中除了footer高度之外的所有剩余高度，侧边栏作为该行的子列元素默认会和行保持等高，自然就能占满从页面顶部到footer上方的全部高度，侧边栏和footer之间的间隙会直接消失。
• 第四步：原来你设置的主内容区彩色包裹层的间距规则完全不需要改动，原有布局的间距会保留。

原方案失效的原因 #

你之前尝试的修改bottom属性或者负margin-top的方案本质是强行修改元素的定位位置，脱离了正常文档流计算，很容易出现后续的间距溢出或者内容重叠问题，用原生弹性布局的流式高度计算可以完全规避这类问题，也和Bootstrap 5的设计逻辑完全适配，不需要额外引入大量自定义CSS。

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