代码之家 › 专栏 › 技术社区 › Mark

设置最大高度以填充所有可用空间

bootstrap-4 css html

Mark · 技术社区 · 5 年前

我的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值,它就会工作。

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

我不知道这是否可以用一些特定的类轻松处理,或者我必须手动计算可用的高度(如果可能的话…)。

更新

我没办法用侧边栏。完整代码:

<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>

自动溢出 行为。我需要为了保持边距而分开。

0 回复 | 直到 5 年前

Carol Skelly 5 年前

我想你应该用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 -使身体显示:flex,柔性-方向:列
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