CSS粘住固定底部的5種方法

本文主要介紹乙個footer元素如何粘住底部，使其無論內容多或者少，footer元素始終緊靠在瀏覽器的底部。我們知道，當內容足夠多可以撐開底部到達瀏覽器的底部，如果內容不夠多，不足以撐開元素到達瀏覽器的底部時，下面要講的布局就是解決如何使元素粘住瀏覽器底部。需求看下圖：·

有乙個全域性的元素包含除了底部之外的所有內容。它有乙個負值下邊距等於底部的高度。

1

<
body
>
2<
div 
class
>34
content56
<
div 
class
="push"
>
div>
7div
>
8<
footer 
class
="footer"
>
footer
>
9body
>

1

html, body 56
min-height:100%;78
/*equal to height of footer */9
/*but also accounting for potential margin-bottom of last child 
*/10
margin-bottom:-50px;
11 }
12.footer,
13.push 

html**：

1

<
body
>
2<
div 
class
="content"
>
3<
div 
class
="content-inside"
>
4content
5div
>
6div
>
7<
footer 
class
="footer"
>
footer
>
8body
>

1

html, body 
5.content 
8.content-inside 
12.footer 

html ：

1

<
body
>
2<
div 
class
="content"
>
3content
4div
>
5<
footer 
class
="footer"
>
footer
>
6body
>

1

.content 
4.footer 

給70px而不是50px是為了為了跟底部隔開20px，防止緊靠在一起。

關於flexbox的教程，還請檢視之前的一篇詳細的教程

html:

1

<
body
>
2<
div 
class
="content"
>
3content
4div
>
5<
footer 
class
="footer"
>
footer
>
6body
>

1

html 
4body 
9.content 

html：

1

<
body
>
2<
div 
class
="content"
>
3content
4div
>
5<
footer 
class
="footer"
>
footer
>
6body
>

1

html 
4body 
9.footer 

grid早於flexbox出現，但並沒有flexbox被廣泛支援，你可能在chrome  canary或者firefox開發版上才可以看見效果

CSS頁面底部固定的6種方法

方法 一 footer高度固定 絕對定位 w head div content div foot div div w.head content foot方法 二 在主體content 上的下邊距增加乙個負值等於底部高度 headerheader contentmain footerfooter ht...

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

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

CSS清除浮動5種方法

清除浮動是每乙個 web前台設計師必須掌握的機能。css清除浮動大全，共8種方法。浮動會使當前標籤產生向上浮的效果，同時會影響到前後標籤 父級標籤的位置及 width height 屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。解決浮動引起的問題有多種方法，但有些方法...