footer固定在頁面底部的實現方法總結

2022-06-16 22:27:09 字數 1862 閱讀 8018

html**：

<


body


>


<


header


>頭部


header


>


<


main


>中間內容


main


>


<


footer


>底部資訊


footer


>


body


>
css**：

*htmlbodyheadermainfooter
實現的效果：

優點：footer一直存在於底部。

缺點：中間區域main如果內容不夠，不能撐滿頁面的中間區域。

html**：

<


body


>


<


div 


class


="container"


>


<


header


>頭部


header


>


<


main


>中間內容


main


>


div>


<


footer


>底部資訊


footer


>


body


>
css**：

*html,body.containerheadermainfooter
此方法把footer之前的元素放在乙個容器裡面，形成了container和footer並列的結構：

首先，設定.container的高度至少充滿整個螢幕；

其次，設定main（.container最後乙個子元素）的padding-bottom值大於等於footer的height值；

最後，設定footer的height值和margin-top負值。

展示效果跟第一種是一樣的，缺點跟第一種也是一樣的。

html**：

<


header


>頭部


header


>


<


main


>中間內容


main


>


<


footer


>底部資訊


footer


>
css**：

*htmlbodyheadermainfooter


/*動態為footer新增類fixed-bottom 


*/.fixed-bottom
js（jquery）**：

$(function


()    }


footerposition();


$(window).resize(footerposition);


});
css**：

html, body, #sticker body > #sticker #stickercon #footer
html**：

<


div 


id="sticker"


>


<


div 


id="stickercon"


>


div>


div>


<


div 


id="footer"


>footer


div>

CSS實現footer固定在頁面底部

作為乙個頁面仔你一定遇到過 當乙個html頁面中含有較少的內容時，web頁面的 footer 部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。那麼如何將web頁面的 footer 部分永遠固定在頁面的底部呢？先來看下下...

footer固定在頁面底部的幾種方法

body header header header main content main footer footer footer body html body header main main的padding bottom值要等於或大於footer的height值 footer 首先，設定body的...

將footer固定在頁面底部的實現方法

html結構 header main content footer css設定 html body header main main的padding bottom值要等於或大於footer的height值 footer首先，設定body的高度至少充滿整個螢幕，並且body作為footer絕對定位的參...