首页 > 代码库 > css布局之圣杯布局
css布局之圣杯布局
三列布局中，左右两列定宽，中间一列自适应是比较常用的一种布局方式。代表性的布局方式有圣杯布局和双飞翼布局。
圣杯布局
下面这些布局都是通过浮动来实现 的，但常常只将三列布局中，左右两列定宽，中间一列自使用看成是圣杯布局。我认为这种观点其实有点狭隘。
单从圣杯布局这个名字来讲，也不是单指三列布局，圣杯并不是三列布局的形象表示，在西方圣杯是指渴求之物。在网页展现时我们渴求之物当然是主内容区域的信息。
圣杯布局就是：将主内容区域首先加载，其次再加载侧边的内容。
先来理解理解一下圣杯布局是如何实现的：
完整代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圣杯布局的几种实现方式</title> <style> *{ margin:0; padding:0; } body{ min-width: 600px; color:#fff; } .header, .footer{ text-align: center; background-color: #ab96c5; } .layout1, .layout2, .layout3, .layout4, .layout5{ margin:5px; overflow: hidden; } .content, .aside{ min-height: 40px; text-align:center; } .content{ /*position: relative;*/ background-color: #793d56; width: 100%; } .aside{ position: relative; background-color: #bb1c33; width:200px; } .layout1{ padding-left: 200px; } #aside1, #content1{ float: left; } #aside1{ margin-left: -100%; left: -200px; } #content2, #aside2{ float:left; } .layout2{ padding-right: 200px; } #aside2{ margin-left: -200px; right: -200px; } .layout3{ padding-left: 200px; padding-right: 200px; } #content3, #aside3-left, #aside3-right{ float:left; } #aside3-left{ margin-left: -100%; left: -200px; } #aside3-right{ margin-left: -200px; right: -200px; } .layout4{ padding-left: 400px; } #content4, #aside4-left1, #aside4-left2{ float: left; } #aside4-left1{ margin-left: -100%; left: -400px; } #aside4-left2{ margin-left:-100%; left: -200px; } .layout5{ padding-right: 400px; } #content5, #aside5-right1, #aside5-right2{ float: left; } #aside5-right1{ margin-left: -200px; right: -200px; } #aside5-right2{ margin-left:-200px; right: -400px; } </style></head><body> <div class="header">头部</div> <div class="layout1"> <div class="content" id="content1">内容区域自适应</div> <div class="aside" id="aside1">左侧边栏固定</div> </div> <div class="layout2"> <div class="content" id="content2">内容区域自适应</div> <div class="aside" id="aside2">右侧边栏固定</div> </div> <div class="layout3"> <div class="content" id="content3">内容区域自适应</div> <div class="aside" id="aside3-left">左侧边栏固定</div> <div class="aside" id="aside3-right">右侧边栏固定</div> </div> <div class="layout4"> <div class="content" id="content4">内容区域自适应</div> <div class="aside" id="aside4-left1">左侧边栏1固定</div> <div class="aside" id="aside4-left2">左侧边栏2固定</div> </div> <div class="layout5"> <div class="content" id="content5">内容区域自适应</div> <div class="aside" id="aside5-right1">右侧边栏1固定</div> <div class="aside" id="aside5-right2">右侧边栏2固定</div> </div> <div class="footer">尾部</div></body></html>
下面分析一下具体每种情况是怎么实现的：
1. 左侧边栏固定，右侧内容区域自适应
实现代码：
.content, .aside{ min-height: 40px; text-align:center; } .layout1{ margin:5px; } .content{ background-color: #793d56; width: 100%; } .aside{ position: relative; background-color: #bb1c33; width:200px; } .layout1{ color:#fff; padding-left: 200px; } #aside1, #content1{ float: left; } #aside1{ margin-left: -100%; left: -200px; }
代码分析：
a.设置 aside和content的最小高度，min-height: 40px；
b.设置 aside和content的背景，将文本颜色设置为白色，方便观察；
c.设置给aside设置一个固定的宽度，width:200px;为了让剩下的被content充满，将它的width设置为：width: 100%;
d.让内容和侧边栏都发生左浮动（似乎什么也没有发生）；
e.设置aside1完全相等于内容区域的左外负边距，margin-left: -100%;
当设置
#aside1{ margin-left: -100%; }
时，aside1的右负边距正好为content的width即：100%；
3D效果：
这时，左侧边栏被移到想放置的位置了，但是发现content区域的文字被侧边栏遮挡住了，需要通过设置父元素的padding-left把内容区域拉出来：
f. 设置layout的padding-left: 200px;
这时，发现左侧边栏又跟着被拉出来了。需要将侧边栏移动到本来的位置：最左边。
g. 设置aside的left: -200px;
通过设置aside1的left:-200px；相当于将aisde1相对于当前位置像右移动-200px；其实就是向左移动200px;但是发现什么也没有发生。
这是因为，aisde1不知道相对于什么位置来定位自己，需要设置定位方式：aside的position属性为position: relative；
这下左侧边栏回到了应该在的位置。
h.将文本居中：
3D效果：
发现这下显示正常了。
——————————————————————————————————————————————————————————————————————————————————————————————————————
2. 右侧边栏固定，左侧内容区域自适应
这其实和上面的左侧边栏固定，右侧内容区域自适应是一个道理，只是有些设置不一样。
.content, .aside{ min-height: 40px; text-align:center; } .layout2{ margin:5px; } .content{ background-color: #793d56; width: 100%; } .aside{ position: relative; background-color: #bb1c33; width:200px; } .layout2{ padding-right: 200px; color: #fff; } #content2, #aside2{ float:left; } #aside2{ margin-left: -200px; right: -200px; }
3. 两侧边栏固定，中间栏自适应。
.content, .aside{ min-height: 40px; text-align:center; } .content{ background-color: #793d56; width: 100%; } .aside{ position: relative; background-color: #bb1c33; width:200px; } .layout3{ padding-left: 200px; padding-right: 200px; color: #fff; } #content3, #aside3-left, #aside3-right{ float:left; } #aside3-left{ margin-left: -100%; left: -200px; } #aside3-right{ margin-left: -200px; right: -200px; }
看一下具体的实现：
a. 首先让左右侧栏和中栏内容栏即三个div都左浮动：
b. 先把左侧边栏拉上去
向上面设置1时一样，设置#aside3-left的margin-left: -100%;
3D效果：
这时，发现内容左侧的文本被遮挡，通过设置父元素layout3的padding-left可以将content内容拉出来：
c. 设置layout3的padding-left：200px;
但是左侧边栏也跟着跑过来了，需要将左侧边栏向左移动。
d.设置#aside3-left的left：-200px;即相对于当前位置向左移动200px;
缺少相对定位，没有效果。
e. 设置#aside3-left的position：relative；
左侧边栏设置成功。接下啦拉动右侧边栏。
f.将右侧边栏拉拉上来：
设置右侧边栏#aside3-right的margin-left: -200px;
此时内容区域有一部分被右侧边栏遮盖住了：（点击内容区域，发现右侧边栏也会被选定）
g.但同时跟左侧边栏一样，应该把content区域从左侧边栏拉出来：
h.设置右侧边栏为相对定位，将右侧边栏向右移动，放回原位。
得到最终想要的结果。
后面的两种布局方式是一样的原理，这里就不再赘述了。
————————————————————————————————————————————————————————————————————————————————————————————————————————
总结：
圣杯布局：用到浮动、负边距、相对定位，不添加额外标签。
首先让布局元素都浮动起来，然后将自适应区域设置为100%，再通过设置自适应元素的父元素左右内边距，将自适应区域左右压缩到合适的宽度，通过设置左右侧边栏的外负边距移动它们的位置，最后进行相对定位，并调整相对位置。
css布局之圣杯布局