“圣杯”三栏布局使用flexbox

 

我试图使用新的display: flex语法来实现一般被描述为“圣杯”（参见本ALA文章）的三列布局。

要求如下：

  • 页眉和页脚，其间有三列
  • 外部的列具有固定的宽度
  • 内柱伸展以填充侧柱之间的空间，最小和最大宽度超过该宽度不会伸展（因此容器也不应该这样）
  • 页脚应该位于视口的底部，直到内容实际上将其推到下面

    • 我用下面的代码得到了前三个要求： 

    <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%;
}

    生活在：jsBin

    但是，我坚持100％的身高。 我已经尝试设置一些列或容器的height: 100%或min-height: 100%但似乎没有工作。 我是否需要许多其他flex属性中的一个来处理这个问题？ 我似乎无法通过树木看到森林。

    .container { min-height: 100vh; }

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

    上一篇: "Holy Grail" three column layout using flexbox

    下一篇: How to Make the Content 100% height and equal height columns in this layout?