Bootstrap导航栏和内容填充高度flexbox。

Question

Bootstrap导航栏和内容填充高度flexbox。

6

我需要创建一个布局，其中内容网格必须占据整个剩余页面，但布局还具有导航栏。

为了实现这一点，我决定将导航栏放置在 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/看到，最后一个菜单项被黄色内容截断了。

我的要求是内容应该填满整个页面。

- Dan

菜单是动态的，所以我无法知道导航栏的高度。导航栏的高度始终为56像素。您只需要将导航栏从容器中取出即可解决问题。 - WebDevBooster

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

Bootstrap 5（2023年更新）

对于未来的读者来说，Bootstrap 5仍然使用flexbox和相同的类来实现全高度布局。

https://codeply.com/p/YSZEOQXFh2

Bootstrap 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/2137d61eacbd962ea41e16a492da8b1d1597d3d9

(更新的Bootstrap 4.1演示)

相关问题：如何使行延伸剩余高度