Układ Bootstrap 4 Holy Grail

Question

Muszę zabraknąć czegoś oczywistego. Próbuję zaimplementować pochodną układu Holy Grail w Bootstrap 4.

Zamiast nagłówka -> Lewa kolumna, Fluid Center, Right Column -> Footer, Chcę mieć nagłówek i stopkę wewnątrz Fluid Center Kolumna. Oczywiście, z nagłówkiem u góry, stopką u dołu i płynną zawartością w środku. I wszystkie kolumny tej samej wysokości.

----------------------------------------------------- 
|   |  Header    |   | 
|   |---------------------------|   | 
| LEFT |       | RIGHT  | 
| PANEL |  MAIN CONTENT  | PANEL  | 
|   |       |   | 
|   |       |   | 
|   |---------------------------|   | 
|   |  Footer    |   | 
----------------------------------------------------- 

Kości kodu są pokazane poniżej. Tam, gdzie walczę, jest poprawne przedstawienie nagłówka i stopki w płynnej środkowej kolumnie. Wyczuwam, że odpowiedź leży w FlexBoxie, ale po prostu nie mogę zawinąć głowy, jak to zrobić!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid h-100" id="root"> 
 
    <div class="row h-100"> 
 
    <div class="col-md-3 fixed py-3">Page Panel Left</div> 
 
    <div class="col fluid py-3">Page Panel Main Stage 
 

 
     <div class="bg-warning" style="height:8rem;">I am a header with a fixed height.</div> 
 
     <div class="">I am the content, I should be fluid and stretch to the bottom.</div> 
 
     <div class="bg-warning" style="height:8rem;">I am the footer with a fixed height</div> 
 

 
    </div> 
 

 
    <div class="col-md-3 fixed py-3">Page Panel Right 
 
     <div> 
 
     <br> 
 
     <p>Nullam congue, dui luctus aliquam maximus, erat magna posuere purus, posuere elementum urna nisi vitae dolor. Integer tristique non velit ut suscipit. Vestibulum quam eros, blandit dapibus iaculis nec, volutpat vel purus. Quisque commodo euismod 
 
      ipsum, quis pulvinar augue. Cras non fermentum velit. Proin tincidunt lectus diam, at ornare augue interdum eget. Vivamus porttitor iaculis urna in porttitor. Maecenas auctor ac augue convallis eleifend. Praesent lacus odio, placerat sed felis 
 
      ac, vulputate auctor quam. Cras in nulla eu libero cursus cursus ut a enim. Praesent varius viverra maximus. Morbi accumsan, orci quis semper tempus, leo ipsum efficitur ipsum, eu fermentum ipsum est ac nibh. Ut ut venenatis eros. Duis neque 
 
      nulla, malesuada non ultrices non, laoreet nec enim. Mauris congue, ipsum non ultrices congue, leo eros tristique urna, bibendum accumsan ligula sem in justo.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Upewnij się, że kolumna środkowa jest flex-column, a następnie użyj flex-grow:1 do głównej zawartości. W tym przykładzie mam tylko paski boczne o stałej szerokości na większych ekranach, ale możesz to zmienić.

http://www.codeply.com/go/licdodtBCO

<div class="container-fluid h-100"> 
    <div class="row h-100"> 
     <!-- left sidebar --> 
     <div class="col-md-2 fixed"> 

     </div> 
     <!-- center content --> 
     <div class="col fluid d-flex flex-column"> 
      <nav id="topNav" class="navbar"> 
      </nav> 

      <!-- main content --> 
      <div class="row flex-grow"> 

      </div> 

      <footer class="navbar navbar-toggleable-xl navbar-faded navbar-light"> 
      </footer> 

     </div> 
     <!-- right sidebar --> 
     <div class="col-md-2 fixed"> 

     </div> 
    </div> 
</div> 

CSS

html { 
    height: 100%; 
} 

body { 
    min-height: 100vh; 
} 

/* fixed and fluid only on sm and up */ 
@media (min-width: 576px) { 
    .fixed { 
     flex: 0 0 200px; 
     min-height: 100vh; 
    } 
    .col .fluid { 
     min-height: 100vh; 
    } 
} 

.flex-grow { 
    flex:1; 
} 

Bootstrap 4 Holy Grail Demo

Uwaga: Ważne jest, aby pamiętać, że w classic "holy grail" layout termin "stałe" odnosi się do szerokości, i nie pozycja jak w position:fixed. Jednak dzięki kilku poprawkom możliwe jest uzyskanie zarówno stałej szerokości, jak i pozycji. Na przykład, oto alternate "Holy Grail" układ z lewym pasku bocznym stałej szerokości i pozycji: https://www.codeply.com/go/s90QZLC0WT