小編典典

更新

我的原始答案來自很久以前，并且鏈接已斷開；更新它，使其繼續有用。

我包括內聯的更新解決方案，以及JSFiddle上的工作示例。注意：盡管沒有內聯那些樣式，但我依賴CSS重置。

HTML

Hello, World!

Sticky Footer

CSS

html, body {

margin: 0px;

padding: 0px;

min-height: 100%;

height: 100%;

}

#wrapper {

background-color: #e3f2fd;

min-height: 100%;

height: auto !important;

margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */

}

#wrapper:after {

content: "";

display: block;

height: 50px; /* the footer's total height */

}

#content {

height: 100%;

}

#footer {

height: 50px; /* the footer's total height */

}

#footer-content {

background-color: #f3e5f5;

border: 1px solid #ab47bc;

height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */

padding: 8px;

}

解決方案2-Flexbox

HTML

Hello, World!

Sticky Footer

CSS

html {

height: 100%;

}

body {

display: flex;

flex-direction: column;

min-height: 100%;

}

#content {

background-color: #e3f2fd;

flex: 1;

padding: 20px;

}

#footer {

background-color: #f3e5f5;

padding: 20px;

}

原始答案

此方法僅使用15行CSS，幾乎不使用任何HTML標記。更好的是，它是完全有效的CSS，并且可以在所有主流瀏覽器中使用。Internet Explorer

5及更高版本，Firefox，Safari，Opera等。

此頁腳將永久停留在頁面底部。這意味著，如果內容大于瀏覽器窗口的高度，則需要向下滾動才能看到頁腳…但是，如果內容小于瀏覽器窗口的高度，則頁腳將停留在底部而不是浮動在頁面中間。

讓我知道您是否需要實施方面的幫助。我希望這有幫助。

2020-05-16

總結

以上是生活随笔為你收集整理的html5中底部对齐怎么写,如何将页脚（div）与页面底部对齐？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。