我正在尝试制作一个看起来像这样的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>
