css - Bootstrap 4 Barra de navegación y altura de relleno de contenido flexbox

twitter-bootstrap bootstrap-4

Question

Tengo que crear un diseño en el que una cuadrícula de contenido debe estar en la página restante completa, pero el diseño también tiene una barra de navegación.

Para hacer esto, decidí colocar la barra de navegación en un contenedor flexible y el contenido en una fila con una altura del 100%. Necesito el contenido para llenar el resto del espacio restante. El menú es dinámico, así que no puedo saber cómo es la altura de la barra de navegación.

Sin embargo, en pantallas más pequeñas, la barra de navegación no cambia de tamaño correctamente. Si el menú se expande, el menú se superpone con el contenido.

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

Puede ver aquí https://jsfiddle.net/ej9fd368/8/ que el último elemento del menú se corta debido al contenido amarillo.

Mi requisito es que el contenido debe llenar el resto de la página.

Answer 1

En lugar de usar h-100 en el área de contenido amarillo, agregue una clase CSS adicional para que crezca flexiblemente: 1 en altura ...

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

https://www.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>

Nota: La clase de utilidad de flex-fill se incluirá en la próxima versión de Bootstrap 4.1: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

( Demo actualizada de Bootstrap 4.1 )

Pregunta relacionada: Bootstrap 4: ¿Cómo hacer que la fila estire la altura restante?