Question

我试图实现一般被描述为＆＃34;圣杯＆＃34;的三栏布局。（请参阅此ALA article）使用新的display: flex语法。

要求如下：

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

我通过以下代码获得了前三个要求：

<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属性中的一个来处理这个问题？我似乎无法透过树木看到森林。

Answer 1

.container { min-height: 100vh; }

＆＃34;圣杯＆＃34;使用flexbox的三列布局

1 个答案: