將footer固定在頁面最下方

html結構：

1

<
div 
id>
2<
div 
id="id_header"
>
3header block
4div
>
5<
div 
id="id_content"
>
6content block
7div
>
8<
div 
id="id_footer"
>
9footer block
10div
>
11div
>

css結構：

1

html, body 5*
8910/*
設定高度最小為100%, 如果內容區塊很多, 可以長大 
*/11
min-height:100%;
12/*
位置設為relative, 作為footer區塊位置的參考 
*/13
position:relative;
14 }
1516
#id_header 
2223
#id_content 
3031
#id_footer

html結構：

1

<
div 
class
="header"
>header
div>
2<
div 
class
="mian"
>main content
div>
3<
div 
class
="footer"
>footer
div>

css設定：

1

html
2body34
.header
5.main/*
main的padding-bottom值要等於或大於footer的height值 */6
.footer

首先，設定body的高度至少充滿整個螢幕，並且body作為footer絕對定位的參考節點；

其次，設定main（footer前乙個兄弟元素）的padding-bottom值大於等於footer的height值，以保證main的內容能夠全部顯示出來而不被footer遮蓋；

最後，設定footer絕對定位，並設定height為固定高度值。

html結構：

<

body
>
<
header
>header
header
>
<
main
>main content
main
>
<
footer
>footer
footer
>
body
>

css設定：

html,bodyheadermainfooter

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

js**:

$(function

() else
}footerposition();
$(window).resize(footerposition);
});

兩種方式實現footer固定在頁面最下方布局

第一種方式設定html body高度100 footer相對body定位 footer 第二種方式用flex布局 我想要它固定頂部 高度自動適應 高度自動適應 高度自動適應 高度自動適應 高度自動適應 高度自動適應 高度自動適應 高度自動適應 高度自動適應 高度自動適應 高度自動適應 高度自動適應 ...

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

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

CSS實現footer固定在頁面底部

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