Bootstrap 4 Holy Grail Layout

Question

I have to miss something obvious. I am trying to implement a derivative of the Holy Grail layout in Bootstrap 4.

Instead of the header -> left column, fluid center, right column -> footer, I want to have a header and footer inside the fluid center column. Obviously, the header is at the top, the footer is at the bottom and the liquid content is in the center. And all the columns are the same height.

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

Code bones are shown below. Where I struggle, you get the correct representation of the header and footer in the fluid center column. I feel that the answer lies with FlexBox, but I just can’t plunge into my head how to do it!

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

Run codeHide result

Answer 1

, flex-column, flex-grow:1 . , .

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

Bootstrap 4 Fixed-Fluid-Fixed

. , " " "" , , position:fixed. , . , " " : https://www.codeply.com/go/s90QZLC0WT