“聖杯”使用flexbox三列布局

Question

我正在嘗試使用新的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屬性中的一個來處理這個問題？ 我似乎無法透過樹木看到森林。

Answer 1

.container { min-height: 100vh; }

“聖杯”使用flexbox三列布局

問題描述

1 個解決方案

解決方案1
2 已采納 2014-09-19 12:20:16

“聖杯”使用flexbox三列布局

問題描述

1 個解決方案

解決方案1 2 已采納 2014-09-19 12:20:16

解決方案1
2 已采納 2014-09-19 12:20:16