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>看到这种技术的顶部/底部，并只是把侧边栏。 即使在IE6中工作：第
这似乎主要是做你所需要的。 http://www.savio.no/examples/three-column-layout-6.asp除了三者之外，它还使用了一个人造的100％高度栏。
链接地址: http://www.djcxy.com/p/4059.html