Bootstrap 5.3侧边栏垂直布局：固定底部与滚动区域实现

针对你提出的两个核心需求，基于Bootstrap 5.3.0-alpha1，修正后的代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏容器：设置h-100占满视口高度，d-flex flex-column实现垂直flex布局 -->
        <div class="col-4 bg-dark text-white" style="height: 100vh; width:250px;">
            <div class="d-flex flex-column h-100">
                <!-- 顶部固定元素 -->
                <div class="p-2 bg-primary">
                    Flex item 1
                </div>

                <!-- 中间滚动区域：flex-grow-1占据剩余空间，overflow-auto实现内容溢出滚动 -->
                <div class="p-2 bg-danger flex-grow-1 overflow-auto">
                    Flex item 2<br>
                    <!-- 模拟大量内容测试滚动 -->
                    测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
                    测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
                    测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
                    测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
                </div>

                <!-- 底部固定元素：flex布局下自动吸附到底部 -->
                <div class="p-2 bg-primary">
                    Flex item 3
                </div>
            </div>
        </div>

        <div class="col bg-secondary text-white">
            main body
        </div>
    </div>
</div>

关键调整说明 #

• 给侧边栏内部的flex容器添加h-100，确保它占满侧边栏的100vh高度，让flex布局能正确分配垂直空间
• 中间内容区域添加flex-grow-1，自动填充顶部和底部元素之外的剩余空间；搭配overflow-auto，当内容超出区域高度时自动显示滚动条，实现独立滚动
• 移除底部元素的position:fixed，垂直flex布局下底部元素会自动被推到容器底部，避免固定定位导致的超出侧边栏范围问题

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