圣杯布局

圣杯布局是典型的 CSS 布局问题，有着众多的解决方案。

圣杯布局是一种非常经典和常用的布局方式，其所指的是三列布局，中间宽度自适应，两边定宽；或者两列布局，主体宽度自适应，左边或右边定宽。

• 边栏应流动居中，定宽。
• 中间一栏 (主要内容) 在 HTML 源码中应该首先元素出现。
• 所有栏同高，忽略实际高度。
• 使用的 HTML 标记尽量少。
• 当页面内容不够充满页面时，页脚应“粘”在底部。

过程

<header>header</header>
<div class="container clearfix">
    <div class="main">main</div>  // main放在前面先渲染
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<footer>footer<footer>

• 设置中间三个div向左浮动，使其排列在一行
• 设置footer元素清除浮动，阻止与上面的main部分重叠。
• 设置中间三个div的宽度，左右定宽，中间宽度自适应。

.container > div {
    height: 10vh;
    float: left;
}

.main {
    width: 100%;
    background-color: #5AEBF0;
}

.left {
    width: 200px;
    background-color: #F668E0;
}

.right {
    width: 200px;
    background-color: #F668A4;
}

1494083623x2890174022.png

• 主内容栏宽度变小，设置container的padding。
• left盒子上去，设置left的margin-left为-100%，。

 .container {
    padding-left: 200px;
}
.left {
    width: 200px;
    background-color: #F668E0;
  margin-left: -100%;
}

1494084112x2890174022.png

由于 container 设置了内边距，因此中间栏看起来就处在了网页的中间，但左右两栏由于排在中间栏的后面，且因为空间不够被挤到了中间栏的下面

• left盒子移动到左边，使用相对定位，设置left属性为盒子宽度等量的负值。

.container > div {
    height: 10vh;
    float: left;
    position: relative;
}

.left {
    width: 200px;
    background-color: #F668E0;
    margin-left: -100%;
    left: -200px;             /*  或者使用 right: 200px;*/
}

1494084481x2890174022.png

• 最后，我们需要把右侧栏放上去，此时只需利用上面的原理把他放到 container 的右外边距的位置即可，我们需要再一次设置一个负外边距的值，它等于右侧栏的宽度

1494085959x2890174022.png