Bootstrap 5 如何移除页面滚动仅保留card-body区域滚动

问题原因 #

双滚动条由两个布局错误导致：

• 浏览器默认给body添加8px外边距，仅设置height:100%未清除边距时，页面总高度会超出视口高度
• 给固定高度的card-header、card-footer错误添加flex-fill类，flex容器下头、内容区、尾三个子元素全部参与弹性伸缩，叠加元素自身内边距、边框尺寸后，总高度超出父容器100%限制，撑出页面级滚动条。

修改方案 #

1. 调整CSS样式 #

给body清除默认外边距，修改后代码如下：

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

.ts_panel {
    height: 100%;
    border-right: 2px solid #646464;
    background: rgb(44,44,44);
}

.ts_usernameInp {
    width: 40%;
    margin: 0 auto;
}

2. 调整HTML结构 #

• 移除card-header、card-footer标签上的flex-fill类，头部、底部为固定功能区，不需要参与弹性空间分配，高度随内容自适应即可
• 给包裹头、内容区、底部的flex父容器添加overflow-hidden类，避免内部元素溢出撑大父容器
• 保留card-body上的flex-fill overflow-auto属性，让它自动占满头部、底部之外的所有剩余高度，内容溢出时仅自身生成滚动条

修改后的核心布局代码：

<form class="h-100" action="" method="post">
    <div class="d-flex flex-column h-100 overflow-hidden">
        <div class="card-header text-center">
            <input type="text" class="form-control ts_usernameInp" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div class="card-body flex-fill overflow-auto">
            <!-- 长文本内容放置在此区域，仅该区域滚动 -->
        </div>
        <div class="card-footer">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Введите сообщение" aria-label="Сообщение" aria-describedby="basic-addon2">
                <div class="input-group-append">
                  <button class="btn btn-primary" type="button">Отправить</button>
                </div>
            </div>
        </div>
    </div>
</form>

修改完成后页面级滚动条会完全消失，仅card-body在内容溢出时显示滚动条，符合预期布局效果。

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