CSS的三列式"圣杯布局"方案完全解析

网络
过去的习惯，决定今天的你，所以，过去的懒惰，决定你今天的一败涂地。人来到这世界后，命运注定了他必须要拼搏，奋斗，坚持，勇敢地走下去，走出属于自己的道路，没有人能不劳而获。

圣杯布局源自 Matthew Levine 在06年的一篇文章，其DOM结构如下：

XML/HTML Code复制内容到剪贴板
  1. <divclass="container">
  2. <divclass="main"></div>
  3. <divclass="sub"></div>
  4. <divclass="extra"></div>
  5. </div>

流程解说
接下来，让我们一步一步地实现圣杯布局；

1、 首先分别浮动main、sub、extra三列， 然后利用负外边距把sub列和extra列定位到左右两边。这时的CSS代码如下：

CSS Code复制内容到剪贴板
  1. .main{
  2. float:left;
  3. width:100%;
  4. height:300px;
  5. background-color:rgba(255,0,0,.5);
  6. }
  7. .sub{
  8. float:left;
  9. width:200px;
  10. height:300px;
  11. margin-left:-100%;
  12. background-color:rgba(0,255,0,.5);
  13. }
  14. .extra{
  15. float:left;
  16. width:180px;
  17. height:300px;
  18. margin-left:-180px;
  19. background-color:rgba(0,0,255,.5);
  20. }

2、 完成上步后，sub和extra列已经到了正确的位置，但是sub和extra列却覆盖了main的两边，对于这个问题，圣杯布局的解决办法是给容器container添加左、右内边距，从而让main列定位到正确的位置。

CSS Code复制内容到剪贴板
  1. .container{
  2. padding-left:210px;
  3. padding-right:190px;
  4. }

3、 完成第二步后又出现了新问题：sub、extra列也受到容器左右内边距的影响位置发生了移动。为了解决这个问题，圣杯布局使用相对定位使sub、extra列回到正确的位置。新添加代码如下：

CSS Code复制内容到剪贴板
  1. .sub{
  2. position:relative;
  3. left:-210px;
  4. }
  5. .extra{
  6. position:relative;
  7. rightright:-190px;
  8. }

4、 当浏览器缩小到一定程度时，这个布局可能会被破坏，可以在body上添加min-width属性解决。最终的圣杯布局CSS代码如下：

CSS Code复制内容到剪贴板
  1. body{
  2. min-width:600px;/*2*sub+extra*/
  3. }
  4. .container{
  5. padding-left:210px;
  6. padding-right:190px;
  7. }
  8. .main{
  9. float:left;
  10. width:100%;
  11. height:300px;
  12. background-color:rgba(255,0,0,.5);
  13. }
  14. .sub{
  15. position:relative;
  16. left:-210px;
  17. float:left;
  18. width:200px;
  19. height:300px;
  20. margin-left:-100%;
  21. background-color:rgba(0,255,0,.5);
  22. }
  23. .extra{
  24. position:relative;
  25. rightright:-190px;
  26. float:left;
  27. width:180px;
  28. height:300px;
  29. margin-left:-180px;
  30. background-color:rgba(0,0,255,.5);
  31. }

点击查看在线demo

完整实例
效果如下：

CSS 和 DOM 代码如下：

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
  6. <title>圣杯布局</title>
  8. <styletype="text/css">
  9. body{background-color:#ffffff;font-size:14px;}
  10. #hd,#ft{padding:20px3px;background-color:#cccccc;text-align:center;}
  11. .bd-lft,.bd-rgt,.bd-3-lr,.bd-3-ll,.bd-3-rr{margin:10px0;min-width:400px;}
  12. .main{background-color:#03a9f4;color:#ffffff;}
  13. .aside,.aside-1,.aside-2{background-color:#00bcd4;color:#ffffff;}
  14. p{margin:0;padding:20px;text-align:center;}
  17. /*左侧栏固定宽度，右侧自适应*/
  18. .bd-lft{
  19. zoom:1;
  20. overflow:hidden;
  21. padding-left:210px;
  22. }
  23. .bd-lft.aside{
  24. float:left;
  25. width:200px;
  26. margin-left:-100%;/*=-100%*/
  28. position:relative;
  29. left:-210px;/*=-parantNode.paddingLeft*/
  30. _left:0;/*IE6hack*/
  31. }
  32. .bd-lft.main{
  33. float:left;
  34. width:100%;
  35. }
  38. /*右侧栏固定宽度，左侧自适应*/
  39. .bd-rgt{
  40. zoom:1;
  41. overflow:hidden;
  42. padding-right:210px;
  43. }
  44. .bd-rgt.aside{
  45. float:left;
  46. width:200px;
  47. margin-left:-200px;/*=-this.width*/
  49. position:relative;
  50. rightright:-210px;/*=-parantNode.paddingRight*/
  51. }
  52. .bd-rgt.main{
  53. float:left;
  54. width:100%;
  55. }
  58. /*左中右三栏自适应*/
  59. .bd-3-lr{
  60. zoom:1;
  61. overflow:hidden;
  62. padding-left:210px;
  63. padding-right:210px;
  64. }
  65. .bd-3-lr.main{
  66. float:left;
  67. width:100%;
  68. }
  69. .bd-3-lr.aside-1{
  70. float:left;
  71. width:200px;
  72. margin-left:-100%;
  74. position:relative;
  75. left:-210px;
  76. _left:210px;/*IE6hack*/
  77. }
  78. .bd-3-lr.aside-2{
  79. float:left;
  80. width:200px;
  81. margin-left:-200px;
  83. position:relative;
  84. rightright:-210px;
  85. }
  87. /*都在左边，右侧自适应*/
  88. .bd-3-ll{
  89. zoom:1;
  90. overflow:hidden;
  91. padding-left:420px;
  92. }
  93. .bd-3-ll.main{
  94. float:left;
  95. width:100%;
  96. }
  97. .bd-3-ll.aside-1{
  98. float:left;
  99. width:200px;
  100. margin-left:-100%;
  102. position:relative;
  103. left:-420px;
  104. _left:0px;/*IE6hack*/
  105. }
  106. .bd-3-ll.aside-2{
  107. float:left;
  108. width:200px;
  109. margin-left:-100%;
  111. position:relative;
  112. left:-210px;
  113. _left:210px;/*IE6hack*/
  114. }
  116. /*都在右边，左侧自适应*/
  117. .bd-3-rr{
  118. zoom:1;
  119. overflow:hidden;
  120. padding-right:420px;
  121. }
  122. .bd-3-rr.main{
  123. float:left;
  124. width:100%;
  125. }
  126. .bd-3-rr.aside-1{
  127. float:left;
  128. width:200px;
  129. margin-left:-200px;
  131. position:relative;
  132. rightright:-210px;
  133. }
  134. .bd-3-rr.aside-2{
  135. float:left;
  136. width:200px;
  137. margin-left:-200px;
  139. position:relative;
  140. rightright:-420px;
  141. }
  144. </style>
  146. </head>
  147. <body>
  149. <divid="hd">头部</div>
  151. <divclass="bd-lft">
  152. <divclass="main">
  153. <p>主内容栏自适应宽度</p>
  154. </div>
  156. <divclass="aside">
  157. <p>侧边栏固定宽度</p>
  158. </div>
  159. </div>
  161. <divclass="bd-rgt">
  162. <divclass="main">
  163. <p>主内容栏自适应宽度</p>
  164. </div>
  166. <divclass="aside">
  167. <p>侧边栏固定宽度</p>
  168. </div>
  169. </div>
  171. <divclass="bd-3-lr">
  172. <divclass="main">
  173. <p>主内容栏自适应宽度</p>
  174. </div>
  176. <divclass="aside-1">
  177. <p>侧边栏1固定宽度</p>
  178. </div>
  180. <divclass="aside-2">
  181. <p>侧边栏2固定宽度</p>
  182. </div>
  183. </div>
  185. <divclass="bd-3-ll">
  186. <divclass="main">
  187. <p>主内容栏自适应宽度</p>
  188. </div>
  190. <divclass="aside-1">
  191. <p>侧边栏1固定宽度</p>
  192. </div>
  194. <divclass="aside-2">
  195. <p>侧边栏2固定宽度</p>
  196. </div>
  197. </div>
  199. <divclass="bd-3-rr">
  200. <divclass="main">
  201. <p>主内容栏自适应宽度</p>
  202. </div>
  204. <divclass="aside-1">
  205. <p>侧边栏1固定宽度</p>
  206. </div>
  208. <divclass="aside-2">
  209. <p>侧边栏2固定宽度</p>
  210. </div>
  211. </div>
  213. <divid="ft">底部</div>
  215. </body>
  216. </html>

圣杯布局的优点总结如下：
1.使主要内容列先加载。
2.允许任何列是最高的。
3.没有额外的div。
4.需要的hack很少。

本文CSS的三列式"圣杯布局"方案完全解析到此结束。年轻时代是培养习惯、希望及信仰的一段时光。小编再次感谢大家对我们的支持！

您可能有感兴趣的文章
面试必问:圣杯布局和双飞翼布局的区别
浅谈css双飞翼布局和圣杯布局
CSS布局之圣杯布局与双飞翼布局
css让页脚保持在底部位置的四种方案
Flex布局史上最简单使用语法教程