如何设置max-height让表格容器填充按钮区与粘性页脚间可用空间？

你遇到的核心问题是flex布局的“空间传递链”没打通——虽然给body设置了vh-100 d-flex flex-column，但中间的容器没有承接这个布局规则，导致带overflow-auto的#content容器无法获取按钮到页脚之间的剩余高度，只能跟着表格内容撑高。

下面是针对你现有代码的修改方案，既能保留row/col的边距，又能实现表格容器自适应剩余空间并滚动：

修改后的完整代码 #

<body class="vh-100 d-flex flex-column overflow-hidden">
<nav id="nav_top" class="navbar navbar-expand navbar-dark bg-dark static-top">
<ul class="navbar-nav d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
<li class="nav-item">
<h5>
<span class="badge badge-secondary">BLABLA</span>
</h5>
</li>
</ul>
</nav>
<!-- 让wrapper填充nav和footer之间的剩余空间 -->
<div id="wrapper" class="flex-grow-1 d-flex overflow-hidden">
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">
<span>NAV 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php">
<span>NAV 2</span>
</a>
</li>
</ul>
<!-- 让内容区域填充侧边栏右侧的剩余空间，并传递flex布局 -->
<div id="content-wrapper" class="flex-grow-1 d-flex flex-column overflow-hidden">
<div class="container-fluid flex-grow-1 d-flex flex-column overflow-hidden">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active">Current page</li>
</ol>
<button type="button" class="btn btn-info mb-3">BUTTON</button>
<!-- 让这个容器填充按钮到容器底部的剩余空间，触发滚动 -->
<div id="content" class="row overflow-auto flex-grow-1">
<div class="col-12 table-responsive">
<table id="tableParameters" class="table table-sm">
<thead class="thead-light">
<tr>
<th scope="col">COL 1</th>
<th scope="col">COL 2</th>
<th scope="col">COL 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<!-- 可添加更多行测试滚动效果 -->
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
<tr>
<td>table</td>
<td>table</td>
<td>table</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- 粘性页脚 -->
<footer class="bg-light py-3">
<p>页脚内容</p>
</footer>
</body>

关键修改点说明 #

• 给#wrapper加flex-grow-1 d-flex overflow-hidden：让它成为flex容器，填充nav和footer之间的所有剩余高度，避免内容溢出整体布局。
• 给#content-wrapper加flex-grow-1 d-flex flex-column overflow-hidden：让内容区域填满侧边栏右侧的剩余空间，同时向下传递flex布局规则。
• 给.container-fluid加flex-grow-1 d-flex flex-column overflow-hidden：让容器不再是内容自适应高度，而是承接父元素的空间分配。
• 给#content加flex-grow-1：这是核心——让带overflow-auto的行容器，填充按钮到容器底部的所有剩余高度，表格内容超过时自动触发垂直滚动。

为什么原来的代码不生效？ #

Bootstrap的overflow-auto需要容器有确定的高度限制才能生效。你之前的布局中，所有父容器都是“内容自适应高度”，没有通过flex-grow分配剩余空间，导致#content的高度完全由表格内容决定，自然不会触发滚动。打通整个flex布局链后，每个层级的容器都正确传递空间规则，#content就有了固定的剩余高度限制，overflow-auto也就正常工作了。

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