css - 100% 高度的 chalice 布局

Question

我正在尝试制作一个看起来像这样的 css 布局

我认为这种布局的 CSS 术语被称为“ chalice ”。我面临的问题是，当我使用在网上找到的布局和解决方案时，我无法让它们按照我的意愿正常工作。我想要做的是创建一个页面，无论内容如何，​​页脚都将位于浏览器底部，而列则向下延伸。到目前为止，我只看到页脚放在内容停止的地方，结果是页脚下有一些空白。

如果有人能帮我解决这个问题，我将不胜感激!

Answer 1

在 2017 年，您可以使用 flexbox 轻松优雅地实现此布局。 :

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header {
  flex: 0 0 100px;
  background-color: #C14F4F;
}
main {
  flex: 1;
  display: flex;
  background-color: #699EBD;
}
footer {
  flex: 0 0 40px;
  background-color: #C14F4F;
}
.left, .right {
  flex: 0 2 150px;
  background-color: #C28282;
}
.middle {
  flex:1 1 300px;
}

<header></header>
<main>
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</main>
<footer></footer>