The holy grail with three columns using flexbox
I am trying to achieve a three column layout that is commonly described as the "holy grail" (see this ALA article ) using a new one display: flex
.
The requirements are as follows:
- Header and footer with three columns in between
- Outer columns are fixed width
- The inner column stretches to fill the space between the side columns, with a minimum and maximum width beyond which it will not stretch (so neither should the container)
- The footer should be at the bottom of the viewport until the content actually pushes it down below.
I got the first three requirements with the following code:
<body>
<div class="container">
<header class="masthead">
<h1>The Header</h1>
</header>
<div class="side-left column">
Left sidebar
</div>
<div class="middle column">
Content goes here
</div>
<div class="side-right column">
Right sidebar
</div>
<footer class="footer">
© Footer
</footer>
</div>
</body>
CSS
.container {
display: flex;
flex-flow: row wrap;
min-width: 500px;
max-width: 1100px;
}
.masthead {
flex: 1 100%;
}
.side-left,
.side-right {
flex: 0 0 150px;
}
.middle {
flex: 1;
}
.footer {
flex: 1 100%;
}
Live in Action: jsBin
However, I am stuck at 100% height. I've already tried setting either some of the columns or the container to height: 100%
or min-height: 100%
, but none of them work. Do I need one of the many other flexibility properties to handle this? I can't seem to see the forest through the trees.
+3
source to share