css twitter-bootstrap flexbox bootstrap-4

Bootstrap Navbar and content fill height flexbox

I have to create a layout in which a content grid has to be on the full remaining page, but the layout has also a navigation bar.

In order to do this I decided to place the navigation bar in a flex container and the content in a row with height 100%. I need the content to fill the rest of the remaining space. The menu is dynamic so I can not know how the height of the navigation bar is.

However on smaller screens the navigation bar does not resize correctly. If the menu is expanded the menu is overlayed with the content.

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

You can see it here https://jsfiddle.net/ej9fd368/8/ that the last menu item is cut because of the yellow content.

My requirement is that the content should fill the rest of the page.

Solution

Bootstrap 5 (update 2023)

For future readers, Bootstrap 5 still uses flexbox and the same classes to achieve a full height layout.

https://codeply.com/p/YSZEOQXFh2

Bootstrap 4 (original answer)

Instead of using h-100 on the yellow content area, add an extra CSS class to make it flex-grow:1 in height...

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

Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

(Updated Bootstrap 4.1 demo)