詳解HTML5將footer置于頁(yè)面最底部的方法(CSS+JS)
發(fā)布時(shí)間：2018-10-11 15:29:16 作者：linwene 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了詳解HTML5將footer置于頁(yè)面最底部的方法(CSS+JS)的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
本文介紹了詳解HTML5將footer置于頁(yè)面最底部的方法(CSS+JS)，分享給大家，具體如下：
JavaScript:
<script type="text/javascript">
$(function(){
function footerPosition(){
$("footer").removeClass("fixed-bottom");
//網(wǎng)頁(yè)正文全文高度
var contentHeight = document.body.scrollHeight,
//可視窗口高度，不包括瀏覽器頂部工具欄
winHeight = window.innerHeight;
if(!(contentHeight > winHeight)){
//當(dāng)網(wǎng)頁(yè)正文高度小于可視窗口高度時(shí)，為footer添加類fixed-bottom
$("footer").addClass("fixed-bottom");
} else {
$("footer").removeClass("fixed-bottom");
}
}
footerPosition();
$(window).resize(footerPosition);
});
</script>
CSS:
.fixed-bottom {
position: fixed;
bottom: 0;
width:100%;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 我們經(jīng)常會(huì)遇到這樣的問題：如何用css來(lái)實(shí)現(xiàn)底部元素可“粘住底部”的效果，對(duì)于“粘住底部”，本篇文章就來(lái)介紹一下。非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
詳解CSS五種方式實(shí)現(xiàn)Footer置底
本篇文章主要介紹了詳解CSS五種方式實(shí)現(xiàn)Footer置底，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-03-16利用CSS使footer固定在頁(yè)面底部的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇利用CSS使footer固定在頁(yè)面底部的實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-05-13html的footer置于頁(yè)面最底部的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇html的footer置于頁(yè)面最底部的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-05-13
