主列在此!
圣杯布局
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>圣杯布局</title> 6 <style type="text/css"> 7 *{ 8 margin: 0;/*margin默认值为0，实际chrome表现却不一致*/ 9 padding: 0;/*默认值为0，但浏览器可以设置各自的默认值，这里需要统一初始化*/ 10 } 11 html,body{ 12 height: 100%; 13 } 14 body{ 15 min-width: 700px;/* 最小宽度必须大于等于container的左右内边距之和+left宽度,否则main元素的宽度无法完全容纳浮动的left元素*/ 16 } 17 /*如果不设置body的最小宽度，在视窗缩放至较小时，会导致body的width无法完全容纳浮动的left，而导致left的一部分在main的下面，无法浮动上去*/ 18 .container{ 19 height: 90%; 20 padding-left: 300px; /*这里也可设置margin-left/right，但是考虑网站很多有background图片或色块，background只能覆盖width+padding区域*/ 21 padding-right: 100px; 22 background-color: #8E8E8E; 23 /*overflow: hidden;*/ 24 } 25 .main,.left,.right{ 26 float: left; 27 position: relative; 28 } 29 .main{ 30 width: 100%; 31 background-color: green; 32 height: 100%; 33 } 34 .left{ 35 background-color: red; 36 height: 100%; 37 width: 300px; 38 margin-left:-100%; /*左外边距设置为负数时，块框向左移动，且能超出其父元素，如果同时设置float，则可忽略与其他元素的碰撞，这里左外边距宽度的设置为其父元素（container)width值的百分数，刚好向左且上浮为main元素的宽度，此时left元素左侧与main元素左侧平齐*/ 39 left:-300px; /*向左移动left元素的宽度，进入container的padding-left区域*/ 40 } 41 .right{ 42 width: 100px; 43 background-color: blue; 44 height: 100%; 45 margin-left: -100px; 46 right:-100px; 47 } 48 .header,.footer{ 49 width: 100%; 50 height: 5%; 51 text-align: center; 52 clear: both; 53 } 54 .header{ 55 background-color: yellow; 56 } 57 .footer{ 58 background-color: pink; 59 } 60 .main-wrap{ 61 margin: 25% 25%; 62 background-color: orange; 63 font-size: 50px; 64 } 65 /*为了定位main的内容，设置了一个main-wrap*/ 66 </style> 67 </head> 68 <body> 69 <div class="header">header</div> 70 <div class="container"> 71 <div class="main"> 72 <div class="main-wrap"> 73 主列在此! 74 </div> 75 </div> 76 <div class="left"> 77 左列守护 78 </div> 79 <div class="right"> 80 右列守护 81 </div> 82 </div> 83 <div class="footer">footer</div> 84 </body> 85 </html>
原文：https://www.cnblogs.com/zhi-xiao/p/9973187.html