"Holy Grail" three column layout using flexbox

 

I'm trying to achieve the three-column layout generally described as the "holy grail" (see this ALA article) using the new display: flex syntax.

The requirements are as follows:

  • A header and footer, with between them three columns
  • The outer columns have fixed widths
  • 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 below

    • I got the first three requirements down 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">
    &copy; 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'm stuck with the 100% height. I already tried setting either some of the columns or the container to height: 100% or min-height: 100% but none seem to work. Do I need one of the many other flex properties to handle this? I can't seem to see the forest through the trees.

    .container { min-height: 100vh; }

    链接地址: http://www.djcxy.com/p/23734.html

    上一篇: 这是代码合同重写器中的错误吗？

    下一篇: “圣杯”三栏布局使用flexbox