圣杯布局_margin方式 · 学海无涯_究其本质_李东旭

>[danger]什么是圣杯布局? 1. 看图如下: (注意这里底部footer, 在屏幕高度不够时要在最下面, 高度撑开了, 也要在所有内容顶到最下面. ![](https://box.kancloud.cn/da23ed4b8f6adc595a6298b877b16ca2_1173x738.png) 2. 设计思路: (1): 设置header+内容的div容器和并列的footer的div (2): 然后设置大容器里的小容器padding-bottom为footer留好位置. (3): 给footer设置margin-top为负数让它顶上来. (4): 然后跟双飞翼布局一样, 设置内容的左中右排列即可. 注意这里不要再给固定高度了. 不然内容无法撑开高度. 3. 代码如下: ``` <style> * { margin: 0; } html, body { height: 100%; } /*全局样式*/ .big_wrap{ min-height: 100%; } .content_wrap{ padding-bottom: 100px; } .footer{ margin-top: -100px; height: 100px; background-color: gray; } .header{ height: 100px; background-color: black; } /*中间部分样式wrap*/ .wrap{ overflow: hidden; } .left_div, .main_div, .right_div { float: left; color: white; } .left_div { margin-left: -100%; width: 200px; background: red; } .right_div { margin-left: -200px; width: 200px; background: blue; } .main_div{ width: 100%; background: green; } .main_content{ margin-left: 200px; margin-right: 200px; } </style> <body> <div class="big_wrap"> <div class="content_wrap"> <div class="header"></div>  <div class="wrap">  <div class="main_div"> <div class="main_content">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我</div> </div> <div class="left_div">左-红色Div, <br><br><br><br><br><br></div> <div class="right_div">右-蓝色Div, <br><br><br><br><br><br></div> </div> </div> </div> <div class="footer"></div> </body> ```