css絕對底部的實現方法

時間 2019-11-26

標籤 css 絕對底部實現方法欄目 CSS 简体版

原文原文鏈接


最近發現公司作的好多管理系統也存在這樣的問題，當頁面不夠長的時候，頁尾也跟着跑到了頁面中部，這樣確實感受視覺體驗不太好，沒有研究以前還真不知道還能用css實現，
主要利用min-height;padding-bottom;margin-bottom:負值；三行代碼，小小的細節增長用戶體驗感。在此分享給你們。

當頁面內容超出屏幕，頁腳模塊會像正常頁面同樣，被推到內容下方，須要拖動滾動條才能看到css

而當頁面內容小於屏幕高度，頁腳模塊會固定在屏幕底部，就像是底邊距爲零的固定定位html

實現方式參照WiseWrong，多謝原創無私分享，這裏我直接用原創的圖文，本身手打一遍，以便增長印象。前端

1、傳統實現方式第一種瀏覽器

思路是，給內容區域設置 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，必須保持一致flex

這種寫法的兼容性很是好，實測 IE7 也能正常展現，效果槓槓的~ui

可是若是頁面的主體佈局有其餘兼容性問題，Sticky Footer 就須要作一些相應的修改spa

2、Flexbox實現code

前輩說的很對，不得不說，CSS3 帶來了前端的一次變革，其中 Flexbox 更是帶來了網頁佈局的一次變革htm

雖然兼容性限制了 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

多謝前輩分享。天天學一點，天天探索一點。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。