设置 max-height 以填充所有可用空间答案

【问题标题】：Set max-height to fill all the available space设置 max-height 以填充所有可用空间
【发布时间】：2020-02-15 22:11:00
【问题描述】：

我的 Web 应用程序在页面中放置了一些区域。基本上：

<body>
  <nav>       <-- top nav bar
  <ol>        <-- breadcrumb
  <div>       <-- row with buttons
  <div class="overflow-auto">
    <table>   <-- run-time growing table
  </div>
  <footer>    <-- sticky footer 
</body>

在运行时，我的脚本将行添加到表中。要让overflow-auto 类正常工作，我必须设置一个max-height 值。如果我将它设置为 100%，它就会像没有溢出一样增长。如果我只设置一个 px 值，它就可以工作。

相反，我的目标是填充前一个 div（带按钮的行）和粘性页脚之间的所有可用空间（因此它取决于浏览器、宽度等...）。

换句话说，我希望用户总是看到页脚，所以当表格到达它时，溢出功能应该开始工作。

我不明白这是否可以通过某些特定类轻松处理，或者我必须手动计算可用高度（如果可能的话......）。

更新

我无法让它与侧边栏一起使用。完整代码：

<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>
<div id="wrapper">
    <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>
    <div id="content-wrapper">
        <div class="container-fluid">
            <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">
                <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>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

我不清楚是什么影响了 overflow-auto 行为。我需要 row/col div 来保持边距。

【问题讨论】：

用javascript做：if (offset.top of div + height of div = offset.top of footer) then height: this much px;自动溢出；
@Mark 请选择一个答案，以便其他人知道问题已解决

标签： html css bootstrap-4

【解决方案1】：

我想你会想为此使用 flexbox...

<body class="vh-100 d-flex flex-column overflow-hidden">
  <nav>       <-- top nav bar -->
  <ol>        <-- breadcrumb -->
  <div>       <-- row with buttons -->
  <div class="overflow-auto">
    <table>   <-- run-time growing table -->
  </div>
  <footer class="mt-auto">    <-- sticky footer -->
</body>

vh-100 - 使整个身体视口高度
d-flex flex-column - 让 body 显示：flex, flex-direction:column
overflow-hidden - 防止正文滚动
mt-auto - 让页脚贴在底部

演示：https://www.codeply.com/go/FSrBOdRVFG

基本上之前已经回答过： Bootstrap 4 row fill remaining height
How to make the row stretch remaining height
Bootstrap 4: Scrollable row, which fills remaining height

【讨论】：

使用侧边栏导航怎么样？只有将元素放在另一个下方时，我才能使其工作......