html5中底部对齐怎么写,如何将页脚（div）与页面底部对齐？

小编典典

更新

我的原始答案来自很久以前，并且链接已断开；更新它，使其继续有用。

我包括内联的更新解决方案，以及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