我必須創建一個布局，其中的內容網格必須在整個頁面上，但布局也有一個導航欄。

為了做到這一點，我決定將導航欄放在一個flex容器中，內容放在一行中，高度為100%。我需要內容來填充剩余的空間。菜單是動態的，所以我不知道導航欄的高度是多少。

然而，在較小的屏幕上，導航條不能正確調整大小。如果菜單被展開，則菜單被內容覆蓋。

<div class="container-fluid h-100 d-flex flex-column">

  <nav class="navbar navbar-expand-sm s-navbar">
     ...
  </nav>
  <div class="row h-100">
     ...// content presented here
  </div>
</div>

你可以在這里看到它 https://jsfiddle.net/ej9fd368/8/說，最后一個菜單項被刪除，因為黃色內容。

我的要求是，內容應該填充頁面的其余部分。

引導數據庫5(2023年更新)

對于未來的讀者，Bootstrap 5仍然使用flexbox和相同的類來實現全高布局。

https://codeply.com/p/YSZEOQXFh2

自舉4(原答案)

不是在黃色內容區域使用h-100，而是添加一個額外的CSS類，使其高度為flex-grow:1...

.flex-fill {
  flex:1 1 auto;
}

https://codeply.com/go/xBAMfbHqbN

<div class="container-fluid h-100 d-flex flex-column">
    <nav class="navbar navbar-expand-sm s-navbar">
        <a class="brand navbar-brand" href="/">Brand</a>
        <button class="navbar-toggler s-btn-hamburger order-first s-color-icons" aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse">
            <span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span>
        </button>
        <div class="navbar-collapse s-menu-content collapse show" id="navbar-test">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown1">
                        <a class="dropdown-item" href="/Device">Sub menu</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/Test">Test</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="row flex-fill">
        <main class="col" style="background-color: yellow"></main>
    </div>
</div>

注意:flex-fill實用程序類將包含在下一個Bootstrap 4.1版本中: https://github . com/twbs/bootstrap/commit/2137d 61 EAC BD 962 ea 41 e 16 a 492 da 8 B1 d 1597 d3d 9

(更新的引導程序4.1演示)

相關問題:如何使行拉伸剩余高度