My goal is to create a three-column layout known as the "holy grail" using the new display: flex syntax, as outlined in this ALA article.
The setup requirements are:
- A header and footer with three columns in between
- The outer columns have fixed widths
- The inner column should stretch to fill the space between the side columns but within certain minimum and maximum width limits (and the container should not stretch past those limits either)
- The footer should stay at the bottom of the viewport until content pushes it down further
I've managed to meet 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%;
}
See it in action here: jsBin
However, I'm struggling with achieving full height. I've experimented with setting different heights for the columns or the container using height: 100% or min-height: 100%, but none seem to work. Are there other flex properties I need to apply to handle this? It feels like I can't see the solution clearly amidst all the details.