css – 100％高度的圣杯布局

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

这种布局的CSS术语被称为“圣杯”.我面临的问题是,当我使用布局和解决方案时,我在网上找到它并不能让它们按照我的要求正常工作.我想要做的是创建一个页面,无论内容如何,​​页面都会在浏览器底部显示页脚,并且列向下延伸到它.到目前为止,我只看到页脚放置内容停止的页面,结果是页脚下的一些空白区域.

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

解决方法

在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>