如何让Bootstrap网格填充页面剩余高度且不超出页面范围？

你的核心问题是flex布局的层级和方向设置错误，导致flex-grow-1无法生效。要实现网格容器填充头部下方剩余高度且不超出页面，需要从根节点开始调整布局结构：

修改步骤 #

• 给html、body以及最外层容器设置height: 100vh，确保整个页面高度基于视口
• 将最外层容器的flex方向改为垂直（flex-direction: column），让header和网格容器垂直排列
• 给网格容器的父级添加flex-grow: 1，让它占据header下方的剩余高度
• 确保网格内部的row和col也能占满高度，避免内容塌陷

修改后的完整代码 #

CSS部分 #

html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
}
#container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
header {
    margin-bottom: 0 !important;
}
.grid-container {
    flex-grow: 1;
    overflow: hidden;
}
.row {
    height: 100%;
}
.col-md-2, .col-md-7, .col-md-3 {
    height: 100%;
    overflow-y: auto;
}

HTML部分 #

<div id="container">
    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 border-bottom">
        <div class="col-md-3 mb-2 mb-md-0">
            <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
                <h1>My Project</h1>
            </a>
        </div>

        <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
            <li><a href="#" class="nav-link px-2 link-secondary">New Game</a></li>
        </ul>

        <div class="col-md-3 text-end">
            <button type="button" class="btn btn-outline-primary me-2">Login</button>
            <button type="button" class="btn btn-primary">Sign-up</button>
        </div>
    </header>
    <div class="container-fluid grid-container p-0">
        <div class="row h-100">
            <div id="players" class="col-md-2 border-end">玩家列表区域</div>
            <div id="game-map" class="col-md-7">
                <script>$(function(){ $('#game-map').load("src/img/game-map.svg"); });</script>
            </div>
            <div id="hand" class="col-md-3 border-start">手牌区域</div>
        </div>
    </div>
</div>

关键说明 #

• 最外层容器设为垂直flex后，flex-grow:1的元素会自动填充剩余空间
• 给列添加overflow-y: auto可以让列内内容超出高度时滚动，避免页面整体滚动
• 移除了原header的mb-4间距，消除头部和网格之间的空白

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