資訊專欄INFORMATION COLUMN
摘要：我們權且把這種解決方案叫術語解釋顧名思義就是使用來實現有粘性的置底元素。下面就為大家講講幾種解決方案，以及這些解決方案的優缺點和兼容性。
前言
很多同學在使用css+html寫頁面的時候，可能會遇到這樣的場景：
頁面除了頭部和底部外，中間部分的內容為空時，頁面就會出現底部向上頂，也就是頭部和底部黏在一起了。
最近開發頁面，也遇到了這個問題，經過查閱很多文章和資料后，整理出這篇文章，希望對大家有用。
我們權且把這種解決方案叫：css sticky footer
術語解釋css sticky footer 顧名思義就是使用css來實現有粘性的置底元素。
下面就為大家講講幾種解決方案，以及這些解決方案的優缺點和兼容性。
方案一 利用margin負值和偽元素實現永遠置底這個方案主要是利用三個地方：
html和body元素設置高度100%；
主容器內部設置最小高度為100%，并使用偽元素after撐開一定高度（此高度須與置底元素高度一致），使用margin（這里設置的值也應該與置底元素高度值一致）進行抵消；
置底元素設置一個固定高度
代碼如下：html
this is header
this is main
css
html,body {
height: 100%;
}
.container {
min-height: 100%;
margin-bottom: -50px;
background-color: #000;
}
.container:after {
display: block;
content: " ";
}
.container:after, footer {
height: 50px;
}
footer {
background-color: #f00;
}
搞定！就是這么簡單~~~
方案預覽http://runjs.cn/detail/de3rw5qq
方案兼容性 pcIE 8+
Edge 12+
Firefox 2+
Chrome 4+
Safari 3.1+
Opera 10.1+
移動端IOS safari 3.2+
Opera mini 全線支持
Android 內置瀏覽器 2.1+
Blackberry browser 7+
Opera Mobile 12+
Chrome for Android 53+
Firefox for Android 49 +
IE mobile 10+
方案優缺點 優點兼容性較好，基本現代瀏覽器都是可行的，不過不兼容IE 8以下
實現簡單，只需要簡單設置根元素，主容器元素和置底元素幾個即可實現；
無需特殊的頁面結構，只要設置與置底元素之間的關系即可實現
純css實現方案！
缺點需要知道置底元素的高度，且不能修改；
主模塊的高度設置為100%，如果遇到不需要100%高度的場景，此方案就得做另外的修改；
方案一總結總的來說，此方案對于不需要兼容太低版本瀏覽器的場景是足夠用了，兼容性屬于比較好的，實現起來也比較方便。
方案二 利用flex特性實現永久置底本方案只需要兩步：
設置主容器的display方式為flex
設置置底元素flex為1
上代碼：html
this is header
this is container
css
html{
height: 100%;
}
header{
background-color: #000;
}
.container{
min-height: 100%;
display: flex;
flex-direction: cloumn;
background-color: #fff;
}
footer {
flex: 1;
background-color: #ff0;
}
方案預覽
http://runjs.cn/detail/rcr6etwv
方案兼容性 pcIE 10+
Edge 12+
Firefox 28+
Chrome 21+
Safari 6.1+
Opera 12.1+
移動端IOS safari 7.1+
Opera mini 全線支持
Android 內置瀏覽器 4.4+
Blackberry browser 10+
Opera Mobile 12.1+
Chrome for Android 53+
Firefox for Android 49 +
IE mobile 11+
方案優缺點 優點使用了css3的新特性，彈性盒子布局，方便快捷；
更少依賴置底元素的高度，這樣置底元素的高度不需要知道就可以實現永久置底；
代碼實現量更加少。
缺點顯而易見的就是它的兼容性了，IE陣線幾乎全軍覆沒，只剩下10和11能夠兼容；
在移動端，要注意各種APP內置瀏覽器對flex的支持沒那么好；
就算是移動端，它的兼容性也可見一斑。
方案三，使用css的calc(),實現永久置底本方案需要兩步：
主元素使用calc設置最小高度
置底元素設置固定高度
上代碼html
RunJS
this is header
this is container
css
.container {
min-height: calc(100vh - 70px);
background-color: #ff0;
}
footer {
height: 50px;
background-color: #f00;
}
方案預覽
http://runjs.cn/detail/cj5r3srq
方案兼容性 pcIE 9+
Edge 12+
Firefox 4+
Chrome 19+
Safari 6+
Opera 15+
移動端IOS safari 6.1+
Opera mini 全線不支持
Android 內置瀏覽器 4.4+
Blackberry browser 10+
Opera Mobile 37+
Chrome for Android 53+
Firefox for Android 49 +
IE mobile 10+
方案優缺點 優點css代碼量極少
html結構代碼也簡單
缺點兼容性差
持續更新中...敬請期待 參考文章https://css-tricks.com/snippets/css/sticky-footer/
https://css-tricks.com/couple-takes-sticky-footer/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115340.html
摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...
摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。 深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...
摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰。 深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...
摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
閱讀 579·2021-11-18 10:02
閱讀 1062·2021-11-02 14:41
閱讀 689·2021-09-03 10:29
閱讀 1903·2021-08-23 09:42
閱讀 2746·2021-08-12 13:31
閱讀 1211·2019-08-30 15:54
閱讀 1965·2019-08-30 13:09
閱讀 1440·2019-08-30 10:55
