圣杯布局
圣杯布局是三列布局,中间宽度自适应,两边定宽,这样做的优势是重要的东西放在文档流前面可以优先渲染。也就是在html文档中,中间的部分要写在左右布局之前。
当然,这种布局是面向PC端的,移动端由于屏幕宽度较小,不推荐多列布局。
DOM结构:
<div class="header">Header</div>
<div class="bd">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right
</div>
</div>
<div class="footer">Footer</div>
1、浮动 + margin-left 的负值(最常用)
<style>
*{
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header,
.footer {
width: 100%;
height: 80px;
line-height: 80px;
background-color: antiquewhite;
text-align: center;
}
/* 中间布局的样式 */
.content {
height: calc(100% - 160px);
/* 根据左边栏和右边栏的宽度设置padding,留出位置放left和right */
padding: 0 150px 0 200px;