CSS实现内容自适应高度且不超出屏幕——Bootstrap侧边栏列表组适配问题

问题背景 #

基于Bootstrap 5侧边栏示例开发页面，在滚动列表上方新增头部内容后出现双滚动条：页面整体产生滚动条（列表被挤出屏幕范围），同时列表自身也存在滚动条（列表尺寸未自动适配头部占用的空间）。

需要实现id为contentArea的div满足以下特性：

• 垂直方向自适应内容高度
• 不超出屏幕范围，内容超出时仅显示自身滚动条

不想使用固定高度（如height:800px），因为无法适配不同尺寸屏幕，也不想通过JavaScript实现，寻求纯CSS解决方案。

原代码 #

<div class="d-flex flex-column">
    <div>
        <header class="mb-1 py-2 w-100">
            <div class="align-items-center container-fluid d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
                <div class="m-0 p-0">
                    <div class="align-items-center d-flex mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" href="/">
                        <span class="fs-4">Task Administration</span>
                    </div>
                </div>
                <div class="m-0 p-0">
                    <button class="btn btn-primary float-end">Save all changes</button>
                    <button class="btn btn-danger float-end me-4">Discard all changes</button>
                </div>
            </div>
        </header>
        <div class="bh-divider"></div>
    </div>
    <main class="d-flex flex-nowrap" >
        <div class="d-flex flex-row" >
            <div class="align-items-stretch bg-white d-flex flex-column flex-shrink-0" style="width: 380px;">
                <a class="align-items-center border-bottom d-flex flex-shrink-0 link-dark p-3 text-decoration-none" href="/">
                    <span class="fs-5 fw-semibold">Categories</span>
                    <button class="btn" style="opacity: 0" type="button">Hidden for alignment</button>
                </a>
                <div class="border-bottom list-group list-group-flush scrollarea" id="contentArea">
                    <data-items-list></data-items-list>
                </div>
            </div>
        </div>
    </main>
</div>

解决方案 #

利用Bootstrap内置的flex布局类和视口高度类，通过以下修改实现自适应高度与滚动控制：

修改后的代码 #

<div class="d-flex flex-column vh-100 overflow-hidden">
    <div>
        <header class="mb-1 py-2 w-100">
            <div class="align-items-center container-fluid d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
                <div class="m-0 p-0">
                    <div class="align-items-center d-flex mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" href="/">
                        <span class="fs-4">Task Administration</span>
                    </div>
                </div>
                <div class="m-0 p-0">
                    <button class="btn btn-primary float-end">Save all changes</button>
                    <button class="btn btn-danger float-end me-4">Discard all changes</button>
                </div>
            </div>
        </header>
        <div class="bh-divider"></div>
    </div>
    <main class="d-flex flex-nowrap flex-grow-1 overflow-hidden">
        <div class="d-flex flex-row h-100">
            <div class="align-items-stretch bg-white d-flex flex-column flex-shrink-0" style="width: 380px;">
                <a class="align-items-center border-bottom d-flex flex-shrink-0 link-dark p-3 text-decoration-none" href="/">
                    <span class="fs-5 fw-semibold">Categories</span>
                    <button class="btn" style="opacity: 0" type="button">Hidden for alignment</button>
                </a>
                <div class="border-bottom list-group list-group-flush scrollarea flex-grow-1 overflow-auto" id="contentArea">
                    <data-items-list></data-items-list>
                </div>
            </div>
        </div>
    </main>
</div>

关键修改说明 #

• 最外层容器：添加vh-100使容器占满整个视口高度，overflow-hidden隐藏容器外的内容，避免页面整体出现滚动条。
• <main>元素：添加flex-grow-1让其占据头部下方的剩余垂直空间，overflow-hidden确保main内部内容超出时不会触发页面滚动。
• main的子div：添加h-100使其继承main的高度，保证侧边栏容器高度正确。
• contentArea：添加flex-grow-1让它占据侧边栏内的剩余垂直空间，overflow-auto在内容超出时显示自身滚动条。

通过这些修改，布局会自动适配不同屏幕尺寸，头部保持固定高度，列表区域自适应剩余空间，仅在内容过多时显示自身滚动条，彻底解决双滚动条问题。

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