Bootstrap 4 Navbar e flexbox di riempimento del contenuto

Devo creare un layout in cui una griglia di contenuti deve trovarsi nella pagina intera rimanente, ma il layout ha anche una barra di navigazione.

Per fare ciò ho deciso di posizionare la barra di navigazione in un contenitore flessibile e il contenuto di una riga con altezza 100%. Ho bisogno che il contenuto riempia il resto dello spazio rimanente. Il menu è dinamico, quindi non posso sapere come è l’altezza della barra di navigazione.

Tuttavia su schermi più piccoli la barra di navigazione non viene ridimensionata correttamente. Se il menu è espanso, il menu viene sovrapposto al contenuto.

...// content presented here

Puoi vederlo qui https://jsfiddle.net/ej9fd368/8/ che l’ultima voce del menu viene tagliata a causa del contenuto giallo.

Il mio requisito è che il contenuto debba riempire il resto della pagina.

Invece di usare h-100 nell’area del contenuto giallo, aggiungi una class CSS extra per farla crescere in flex: 1 in altezza …

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

https://www.codeply.com/go/xBAMfbHqbN

  

Nota: la class di utilità flex-fill verrà inclusa nella prossima versione di Bootstrap 4.1: https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9

( Demo di Bootstrap 4.1 aggiornato )


Domanda correlata: Bootstrap 4: come rendere la riga allungare l’altezza rimanente?