三种方式实现圣杯布局

圣杯布局的三种实现

圣杯布局是一种很常见的css布局。他要求：

• 上部和下部各自占领屏幕全部宽度。
• 上下部之间的部分是一个三栏布局。
• 三栏布局两侧宽度不变，中间部分自动填充整个区域。
• 中间部分的高度是三栏中最高的区域的高度。

本文会用三种方法来实现圣杯布局，分别是浮动，flexbox以及css grid。

浮动实现

实现原理

• 外层框架

<div class="header">这里是头部</div>
<div class="container"></div>
<div class="footer">这里是底部</div>

.header,.footer{
    height:200px;
    width:100%;
    background:red;
}
.container{
    padding-left:200px;
    padding-right:300px;
}

• 填充三栏

这一步骤，首先给底部区域清除浮动，防止跟随上边的区域一块儿浮动。
另外：把中，左，右三个区域设置成度浮动。给左右两块区域固定的宽度，中间部分的宽度设置成100%。

这样实现下来，由于浮动的关系，[middle]会占据[container]的全部部分，而左右两块区域都会被挤到下面，可是，因为第一步设置了内边距的关系，[container]的左右各剩余了一块区域，且宽度与左右区域相同。

<div class="header">这里是头部</div>
<div class="container">
    <div class="middle">中间部分</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
<div class="footer">这里是底部</div>


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    width:300px;
    background:aqua;
}

• 移动左侧区域

接下来要作的就是把左右两块区域挪到空出来的内边距空间里去。

先移动左边，新加一个样式 margin-left:-100%。这样一来，由于浮动关系，就把左边块上移到了[middle]左侧，与其交织在一块儿，而右侧栏就自动往左移动。而后再给左侧栏一个偏移量，偏移量刚好是其宽度，这一步要给[container]的position设成relative

<div class="header">这里是头部</div>
<div class="container">
    <div class="middle">中间部分</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
<div class="footer">这里是底部</div>


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
}

• 移动右边

同上一步的原理同样，把右侧区域也给弄上去，设置负外边距和自己宽度相同就好了。

<div class="header">这里是头部</div>
<div class="container">
    <div class="middle">中间部分</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
<div class="footer">这里是底部</div>


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.footer{
    clear:both;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.container div{
    postion:relative;
    float:left;
}
.middle{
    width:100%;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
    margin-left:-100%;
    right:200px;
}
.right{
    width:300px;
    background:aqua;
    margin-right:-300px;
}

特别完美~

flexbox弹性盒子实现

弹性盒子用来实现圣杯布局特别简单。只须要把中间的部分用flex布局便可。

<div class="header">这里是头部</div>
<div class="container">
    <div class="left">左边</div>
    <div class="middle">中间部分</div>
    <div class="right">右边</div>
</div>
<div class="footer">这里是底部</div>


.header,.footer{
    height:40px;
    width:100%;
    background:red;
}
.container{
    display: flex;
}
.middle{
    flex: 1;
    background:yellow;
}
.left{
    width:200px;
    background:pink;
}
.right{
    background: aqua;
    width:300px;
}

很简单，在写html的时候，由于再也不涉及到浮动，只须要按照左中右的顺序来写就能够了。左右两块区域的宽度写死，把中间的区域的flex属性设置成1就能够了。

css grid网格

grid是一种新的布局方式，截止2018年初，绝大多数浏览器都已经支持css grid。
其原理就是把页面的区域划分红一个一个的网格，就和围棋的棋盘同样。

用网格来解决圣杯问题，能够摆脱弹性盒子时须要格外加一个[container]的问题，也就是左中右三款区域不须要在他们外边包装一个额外的div。

先看一下代码：

<div id="header">header</div>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>     
<div id="footer">footer</footer></div>
   


body{
    display: grid;
}
#header{
    background: red;
    grid-row:1;
    grid-column:1/5;
}
    
#left{
    grid-row:2;
    grid-column:1/2;
    background: orange;
}
#right{
    grid-row:2;
    grid-column:4/5;
    background: cadetblue;
}
#middle{
    grid-row:2;
    grid-column:2/4;
    background: rebeccapurple
}
#footer{
    background: gold;
    grid-row:3;
    grid-column:1/5;
}

简单说一下代码的实现。回头会专门看一下css grid的细节。

首先给最外层的body设成display:grid。固然，是外层父级元素便可，不必定是body。

grid-row就是说由上到下，#header占据第1格，#left,#middle,#right占据第2格，#footer占据第3格。

而grid-column表示，在横向从左向右，分红了五格。其中#header和#footer占据所有。#left占据第1格，#middle占据第2到第4格，#right占据第5格。

无论是实现起来仍是理解起来都很方便。
关于css grid，下次继续总结。

小结

总的来讲，我认为使用弹性盒子布局实现圣杯模式是最方便最快速且不用担忧移动端的适配问题。而css grid网格，并非全部浏览器都支持，因此，暂时不太建议大规模使用。至于，第一种方法，面试的时候准备准备仍是颇有好处的。