Holy grail layout with 100% height

I am trying to make a css layout that looks like this

The CSS term for this type of layout is known as the "holy grail" I think. The problem I am facing is that when I use layouts and solutions I find online I do not get them to work properly as I want them to. What I am trying to do is make a page that, regardless of content, will have the footer at the bottom of the browser and the columns stretching down to it. So far I have only seen pages that have the footer placed where the content stop, the result is some blank space under the footer.

If anyone could help me out on this it would be greatly appreciated!

---

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

---

See this technique for top/bottom, and just put sidebars in it. Even works in IE6 :p

---

This seems to mostly do what you need. http://www.savio.no/examples/three-column-layout-6.asp It uses a faux 100% height column in addition to the three.

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

上一篇: 代码合同试图获得构建错误而不是警告

下一篇: 100％身高的圣杯布局