实现div填充剩余屏幕空间且不超出视口的响应式布局

需求 #

• 让指定<div>元素填充页面所有可用剩余空间
• 当元素内内容超出剩余空间时，仅在元素内部滚动，不改变元素高度
• 元素高度需固定为屏幕高度减去页面其他所有元素总高度，适配任意屏幕尺寸

初始尝试代码 #

使用Bootstrap 5.2实现的初始布局：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="row mx-0 flex-grow-1">
    <div class="d-flex col-4 flex-column h-100 border border-dark">
        <!-- 该列应随父元素扩展，但不能超出屏幕 -->
        <div class="row py-2">
            <div class="col">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">好友</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">好友请求</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row flex-grow-1 overflow-auto">
            <div class="col flex-column">
                <!-- 当列表内容超出父容器时，应在内部滚动，不改变高度 -->
                <ul class="list-group-flush" style="padding: 0;">
                    <li class="list-group-item">
                        <h3 class="col lead">好友</h3>
                    </li>
                    <li class="list-group-item">
                        <h3 class="col lead">好友</h3>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 聊天区域 -->
    <div class="col-8 flex-column h-100 border-top border-end border-bottom border-dark">

    </div>
</div>

图中红色框为代码作用的屏幕区域，其高度需始终等于屏幕高度减去页面其他元素总高度，保持固定不变。

此前尝试给父元素设置style="max-height: 520px;"接近效果，但无法适配不同屏幕高度，需要响应式解决方案。

最终解决方案（更新） #

应用方案后实现了带嵌套滚动区域的布局，使用Bootstrap 5.1：

自定义CSS #

html {
    font-size: 14px;
    position: relative;
    height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.site-root {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
}

.footer {
    position: static!important;
}

完整HTML布局 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body class="site-root h-100">

    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <h3>头部</h3>
            </div>
        </nav>
    </header>
    
    <main class="container d-flex flex-column flex-grow-1 overflow-hidden">
        <div class="row"><h1>横幅区域</h1></div> <!-- 横幅 -->
        <div class="row flex-grow-1 overflow-auto" style="flex-flow:nowrap;">
            <div class="col-3 flex-grow-1 overflow-auto">
                <!-- 左侧面板 -->
                <h3>左侧面板</h3>
            </div>
            <div class="col-9 d-flex flex-column flex-grow-1">
                <div class="row"><h3>导航栏</h3></div> <!-- 导航栏 -->
                <div class="row flex-grow-1 overflow-auto" style="flex-flow:nowrap;">
                    <div class="col-3 d-flex flex-column flex-grow-1">
                        <!-- 好友列表 -->
                        <div class="row"><h4>好友列表</h4></div>
                        <div class="row flex-grow-1 overflow-auto" style="flex-flow:nowrap;">
                            <div class="col flex-column flex-grow-1 overflow-auto">
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                                <div class="p-2">好友</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-9 d-flex flex-column-reverse flex-grow-1">
                        <!-- 聊天区域 -->
                        <div class="row"><h4>消息输入栏</h4></div>
                        <div class="row flex-grow-1 overflow-auto" style="flex-flow:nowrap;">
                            <div class="col flex-grow-1 overflow-auto">
                                <p style="height:300vh;">1. 用于强制触发滚动条的示例文本...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer id="site-footer" class="border-top footer">
        <div class="container">
            <h3>页脚</h3>
        </div>
    </footer>
</body>

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