圣杯布局,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>2020 年了，来点Grid怎么样？
body {
display: grid;
height: 100vh;
grid-template: auto 1fr auto / auto 1fr auto;
}
header {
grid-column: 1 / 4;
}
.left-sidebar {
grid-column: 1 / 2;
}
main {
grid-column: 2 / 3;
overflow: auto;
}
.right-sidebar {
grid-column: 3 / 4;
}
footer {
text-align: center;
grid-column: 1 / 4;
}
html, body {
margin: 0;
padding: 0;
background-color: #aed9e0;
}
body > * {
outline: 1px dashed #247ba0;
}
.left-sidebar, .right-sidebar, main, header, footer {
padding: 2rem;
}<body>
<header><strong>Header</strong></header>
<div class="left-sidebar">Left Sidebar</div>
<main contenteditable>
Main Content
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</main>
<div class="right-sidebar">Right Sidebar</div>
<footer>Footer Content</footer>
</body>