100% 高度的圣杯布局 [英] Holy grail layout with 100% height

问题描述

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

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

我认为这种布局的 CSS 术语被称为圣杯".我面临的问题是，当我使用我在网上找到的布局和解决方案时，我没有让它们像我希望的那样正常工作.我想要做的是制作一个页面，无论内容如何，​​页脚都将位于浏览器底部，而列则向下延伸.到目前为止，我只看到将页脚放在内容停止位置的页面，结果是页脚下方有一些空白.

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:

In 2017, you can achieve this layout pretty gracefully and easily with 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>

这篇关于100% 高度的圣杯布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！