CSS Sticky Footer實現(xiàn)代碼
我要評論本文介紹了CSS Sticky Footer實現(xiàn)代碼，分享給大家，具體如下：
上圖所顯示的效果就是sticky Footer，當(dāng)頁面主題內(nèi)容不夠長時，footer定位在窗口的底部，當(dāng)頁面主題內(nèi)容超出窗口后，footer顯示在頁面的最底部
以下給出幾種實現(xiàn)方案：
1. FlexBox布局
HTML結(jié)構(gòu)如下：
<body>
<div class="header">Sticky Footer</div>
<div class="content">
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
</div>
<div class="footer">
<p>This is footer</p>
</div>
</body>
主要CSS如下：
body{
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content{
flex: 1;
}
FlexBox實現(xiàn)就是這么簡單，實現(xiàn)效果也貼上來
貼圖的效果好像不太好，但是效果是實現(xiàn)了的哦?。。。?/p>
2. 經(jīng)典套路：padding-bottom + margin-top
HTML結(jié)構(gòu)如下：
<body>
<div class="wrapper clearfix">
<div class="title">Sticky Footer</div>
<div class="content">
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
</div>
</div>
<div class="footer">
<p>This is footer</p>
</div>
</body>
主要CSS如下：
.wrapper{
min-height: 100vh;
}
.content{
padding-bottom: 50px;
}
.footer{
height: 50px;
margin-top: -50px;
}
實現(xiàn)效果（感覺需要裝個錄屏軟件了）：
使用此方案時要注意以下幾點：
1. wrapper的最小高度要等于窗口高度
2. content的padding-bottom、footer的margin-top和height這三個屬性值的絕對值需保持一致（因為margin-top為負(fù)值，所以說絕對值）；保持一致的原因是更好的實現(xiàn)sticky footer，雖然height什么的偏小也能實現(xiàn)sticky footer效果，但是給最底部留下了空隙。
3. 這種方案的兼容性不錯，各大主流瀏覽器均可，emmmmm，還不錯
4. 當(dāng)主體使用懸浮布局的時候，那么就需要考慮一個兼容性問題，這里使用的重點是為了Google chrome
上述第四條兼容性解決方案：
給.wrapper加上著名的clearfix hack：
.clearfix{
display: inline-block
}
.clearfix:after{
display: block
content: "."
height: 0
line-height: 0
clear: both
visibility: hidden
}
3. 固定高度的解決方案
HTML結(jié)構(gòu)如下：
<body>
<div class="wrapper">
<div class="header">Sticky Footer</div>
<div class="content">
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
<p>測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>
</div>
</div>
<div class="footer">
<p>This is footer</p>
</div>
</body>
主要CSS樣式如下：
.wrapper{
min-height: calc(100vh - 50px);
box-sizing: border-box;
}
注：50px為footer的高度，calc()運算符前后都需要保留一個空格。
結(jié)果我就不貼了，大家自行腦補(bǔ)，跟上面的都差不多。。。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS Sticky Footer 幾種實現(xiàn)方式
這篇文章主要介紹了CSS Sticky Footer 幾種實現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2019-06-05
這篇文章主要介紹了CSS實現(xiàn)Sticky Footer的示例代碼的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-24
詳解CSS經(jīng)典布局之Sticky footer布局
這篇文章主要介紹了詳解CSS經(jīng)典布局之Sticky footer布局的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-08
這篇文章主要介紹了詳解Sticky Footer 絕對底部的兩種套路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-03
css sticky footer經(jīng)典布局的實現(xiàn)
這篇文章主要介紹了css sticky footer經(jīng)典布局的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-03-02
