圣杯布局，100％高度

Question

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

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

如果有人能帮助我，我们将不胜感激！

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>

Answer 2

请查看this technique的top / bottom，然后将侧边栏放入其中。甚至适用于IE6：p

Answer 3

现在是2019年，一些Grid怎么样？

.sidebar {
    grid-area: sidebar;
    background-color: #b98583;
}

.sidebar2 {
    grid-area: sidebar2;
    background-color: #b98583;
}

.content {
    grid-area: content;
    background-color: #749dba;
}

.header {
    grid-area: header;
    background-color: #b45653;
    height: 30px;
}

.footer {
    grid-area: footer;
    background-color: #b45653;
    height: 30px;
}

.wrapper {
    display: grid;
    grid-template-areas:
     "header"
     "sidebar"
     "content"
     "sidebar2"
     "footer";
     padding: 0;
     margin: 0;          
}

.wrapper {
    grid-template-areas:
    "header   header header"
    "sidebar  content sidebar2"
    "footer   footer footer";
    grid-template-columns: 20% 2fr 20%;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.box {
    color: #fff;
    font-size: 80%; 
    text-align: center;
}

<div class="wrapper">
  <div class="box header">header</div>
  <div class="box sidebar">left</div>
  <div class="box sidebar2">right</div>
  <div class="box content">middle</div>
  <div class="box footer">footer</div>
</div>

Answer 4

这似乎主要做你需要的。 http://www.savio.no/examples/three-column-layout-6.asp 除了三个之外，它还使用了一个100％高的人造柱。

Answer 5

对两个侧边栏使用以下内容：

padding-bottom:9999px;
margin-bottom:-9999px;

这会创建“隐形”内容，允许侧边栏一直延伸到底部（负边距“标准化”侧边栏尺寸，以便在侧边栏上执行的计算仍然有意义。）