標籤：class www. meta span header bottom css 實現 技術
聖杯布局的實現，有很多種。
大致都是藉助 padding, margin， float之類的，當然這是傳統的實現方式。更多的參考方式聖杯布局小結.
這裡說的是用css3 cal 和flex來實現，因為css有限，有不當或者錯誤之處，敬請指出。
css3 cal 的支援情況，總體 93%。
flex布局的支援情況， 總體97%
為了增加複雜度
1. 塊之間有間距
2. 有 border
3. 都採用了 box-sizing: content-box
先看 calc的實現
<!DOCTYPE html><html lang="en"><head> <title>css3 cal</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; box-sizing: border-box } .header { background: red; height: 100px; } .footer { height: 100px; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; background-color: palevioletred } .header, .footer, .left, .content, .right { border: 10px solid black; box-sizing: border-box } .left { margin: 20px 0; background: green; width: 100px; } .content { margin: 20px 20px; background-color: silver; width: calc(100% - 240px); width: -webkit-calc(100% - 240px); width: -moz-cal(100%-240px); } .right { margin: 20px 0; background-color: yellow; width: 100px; } .left, .content, .right { float: left; height: calc(100% - 240px); height: -webkit-calc(100% - 240px); height: -moz-cal(100%-240px); } </style></head><body> <div class="header">header</div> <div class="left">left</div> <div class="content">content</div> <div class="right">right</div> <div class="footer">footer</div></body></html>
效果
現在看flex的實現方式
<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0 } body { display: flex; flex-direction: column; } .header { height: 100px; background: red; } #container { display: flex; flex: 1 1 auto; margin: 20px 0; } .left { background-color: green; } .right { background-color: yellow; } .content { flex: 1 1 auto; background-color: silver; margin: 0 20px; } .footer { height: 100px; width: 100%; background-color: palevioletred } .left, .right { flex: 0 0 100px; } .left, .right, .content, .header, .footer { box-sizing: border-box; border: 10px solid black; } </style></head><body> <div class="header">header</div> <div id=‘container‘> <div class="left">left</div> <div class="content">content</div> <div class="right">right</div> </div> <div class="footer">footer</div></body></html>
效果：
效果是一樣的，都只是展開縮放自動填滿。
但是都把 box-sizing: border-box 刪除掉的時候，會發現 calc已經壞掉了，但是flex依舊沒有發生混亂。
這就是我為什麼愛flex的原因。 還有這麼複雜的去計算，真心的類，支援度還沒flex高。
難道是我還是太年輕吧。
引用：
聖杯布局小結
聖杯布局之 css3 calc和 flex
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
