css絕對底部的實現方法
阿新 • • 發佈：2018-05-15
真的 bsp 填充 https 修改 體驗 寫法 思路 管理系
最近發現公司做的好多管理系統也存在這樣的問題，當頁面不夠長的時候，頁尾也跟著跑到了頁面中部，這樣確實感覺視覺體驗不太好，沒有研究之前還真不知道還能用css實現，
主要利用min-height;padding-bottom;margin-bottom:負值；三行代碼，小小的細節增加用戶體驗感。在此分享給大家。
當頁面內容超出屏幕，頁腳模塊會像正常頁面一樣，被推到內容下方，需要拖動滾動條才能看到
而當頁面內容小於屏幕高度，頁腳模塊會固定在屏幕底部，就像是底邊距為零的固定定位
實現方式參照WiseWrong，多謝原創無私分享，這裏我直接用原創的圖文，自己手打一遍，以便增加印象。
一、傳統實現方式第一種
思路是，給內容區域設置 min-height:100%;把footer 頁腳擠到屏幕下方，
給內容的子集盒子設置padding-bottom;其值為footer的高度，
然後再給footer添加 margin-top, 其值為 footer 高度的負值，
這樣padding-bottom和margin-top重合就能在視覺上實現覺得底部的效果，效果簡直是杠杠的~~
html：
1 <body> 2 <div class="wrap"> 3 <div class="content"> 4 <p>填充內容</p> <!-- 這裏多復雜幾行，方可看到效果 --> 5 </div> 6 </div> 7 <div class="footer"> 8 <p>這是頁腳</p> 9 </div> 10 </body>
css：
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 html,body{ 6 height: 100%; 7 } 8 .wrap{ 9 min-height: 100%; 10 } 11 .content{ 12 /* padding-bottom 等於footer的高度 */ 13 padding-bottom: 60px; 14 } 15 .content p{ 16 border-top: 1px solid #ccc; 17 border-bottom: 1px solid #ccc; 18 padding: 30px 5px; 19 } 20 .footer{ 21 width: 100%; 22 text-align: center; 23 height: 60px; 24 /* 等於footer高度的負值 */ 25 margin-top: -60px; 26 background: #999999; 27 } 28 .footer p{ 29 line-height: 60px; 30 font-size: 30px; 31 }
需要註意的就是內容區域 content 的 padding、footer 的 height 和 margin， 必須保持一致
這種寫法的兼容性非常好，實測 IE7 也能正常展示，效果杠杠的~
但是如果頁面的主體布局有其他兼容性問題，Sticky Footer 就需要做一些相應的修改
二、Flexbox實現
前輩說的很對，不得不說，CSS3 帶來了前端的一次變革，其中 Flexbox 更是帶來了網頁布局的一次變革
雖然兼容性限制了 Flexbox 在國內的推廣，但不可否認的是，Flexbox 是前端布局的一大趨勢
如果你還不了解 Flexbox，可以看看阮一峰老師的博客 Flex 布局教程：語法篇
html：
1 <body> 2 <div class="content"> 3 <p>填充內容</p> 4 </br> 5 </div> 6 <div class="footer"> 7 <p>這是頁腳</p> 8 </div> 9 </body>
css：
html,body{ height: 100%; display: flex; flex-direction: column; } .content{ flex: 1; }
真的很神奇就實現了~~和經典套路相比，首先是 HTML 部分，內容區域 content 不再需要 wrap 容器
然後 CSS 部分減肥成功，僅僅使用四行代碼，就解決了曾經困擾了一代人的難題
而且使用 Flexbox，就不需要限定 footer 的高度，讓頁面布局更加靈活
當然缺點也是顯而易見的，只有 IE10 及以上的瀏覽器才支持 flex 布局
轉載來自：http://www.cnblogs.com/wisewrong/p/6525696.html
多謝前輩分享。每天學一點，每天探索一點。
css絕對底部的實現方法