Holy Grail Layout with 100% Height

Holy grail layout with 100% height

In 2017, you can achieve this layout pretty gracefully and easily with flexbox:

body {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}

header {

  flex: 0 0 100px;

  background-color: #C14F4F;

}

main {

  flex: 1;

  display: flex;

  background-color: #699EBD;

}

footer {

  flex: 0 0 40px;

  background-color: #C14F4F;

}

.left, .right {

  flex: 0 2 150px;

  background-color: #C28282;

}

.middle {

  flex:1 1 300px;

}

<header></header>

<main>

  <div class="left"></div>

  <div class="middle"></div>

  <div class="right"></div>

</main>

<footer></footer>

Flexgrid holy grail with 100% height

If you want an element to occupy 100% viewport height, with the option to expand to accommodate additional content, use min-height: 100vh (demo).

For reasons explained in the following posts, percentage heights are not as efficient and easy to use as viewport percentage heights.

• Working with the CSS height property and percentage values
• Font size with percentage value (%) not scaling with screen size

Holy Grail 3 Columns Full Height Layout

See this fiddle

Just set height 100% to html,body:

html,body{
    height:100%;
}

And also give inner three columns 100% height;

.colright,
.colmid,
.colleft {
    float:left;
    width:100%;         
    position:relative;
    height:100%;
}

Bootstrap 4 Holy Grail Layout

Make sure the center column is flex-column, and then use flex-grow:1 for the main content. In this example, I only have the sidebars fixed width on larger screens, but you may decide to change this.

http://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

Bootstrap 4 Fixed-Fluid-Fixed

Note: It's important to note that in the classic "holy grail" layout, the term "fixed" refers to width, and not position as in position:fixed. However, with a few tweaks it's possible to get both fixed width and position. For example, here's an alternate "holy grail" layout with left side bar fixed width and position: https://codeply.com/go/s90QZLC0WT

Flexbox Holy grail layout with footer next to sidebar instead of below

height:100% must be inherited from html, else it is 100% of nothing (body had no height set).

you HolyGrail-content-wrapper needs to be a flexbox too.

Run snippet below in full page mode

html, body,.HolyGrail {

  height: 100%;

  margin:0;

}

.HolyGrail {

  display: flex;

  /* 1, 3 */

  flex-direction: column;

}

.HolyGrail-header,

.HolyGrail-footer {

  flex: none;

  /* 2 */

  color: #FFFFFF;

  height: 48px;

  background-color: #222222;

}

.HolyGrail-body {

  display: flex;

  flex: 1 0 auto;

  /* 2 */

  flex-direction: row;

  padding: var(--space);

}

.HolyGrail-content {

  flex: 1;

  margin-top: var(--space);

  background-color: #AAAAAA;

}

.HolyGrail-nav {

  order: -1;

}

.HolyGrail-nav,

.HolyGrail-ads {

  flex: 0 0 10%;

  padding: 1em;

  background: rgba(147, 128, 108, 0.1);

}

.HolyGrail-content-wrapper {

  flex:1;

 display:flex;

  flex-flow:column;

}

<div class="HolyGrail">

  <header class="HolyGrail-header">

    Header.

  </header>

  <div class="HolyGrail-body">

    <div class="HolyGrail-content-wrapper">

      <main class="HolyGrail-content">

        <p>Line of text.</p>

        <p>Line of text.</p>

        <p>Line of text.</p>

        <p>Line of text.</p>

        <p>Line of text.</p>

        <p>Line of text.</p>

      </main>

      <footer class="HolyGrail-footer">

        Footer.

      </footer>

    </div>

    <nav class="HolyGrail-nav">

      Sidebar.

    </nav>

  </div>

</div>

Holy Grail Technique - Problem with Left Container Float

According to my understanding,your let container is not visisble.Do add on your preference on the code below

* {

  margin: 0;

  padding: 0;

}

.container {

  width: 100vw;

  display: flex;

  flex-direction: row;

  align-items: stretch;

}

.column {

  flex-grow: 1;

}

.center {

  padding: 10px 20px;

  background-color: chartreuse;

}

.left {

  background-color: aqua;

  padding: 10px 10px;

}

.right {

  background-color: blueviolet;

  padding: 10px 10px;

}

<header class="header">Header</header>

<div class="container">

  <div class="left column">Container Left</div>

  <div class="center column">Container Center</div>

  <div class="right column">Container Right</div>

</div>

<footer class="footer">Footer</footer>

---

Related Topics