圣杯布局_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> ```