小编典典

更新

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

我包括内联的更新解决方案，以及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）与页面底部对齐？相关推荐

如何将页脚固定在页面底部
感觉有些繁琐.目前简单的,是在上continer中使用min-height属性,当然没有测试兼容性. -------2016-5-9 16:17:51-- source:如何将页脚固定在页面底部
如何将页脚固定在页面底部，而不是屏幕底部！
一个经典的 Sticky footers 布局问题话不多说贴代码 <div class="main"><div class="main-box&quo ...
如何确保页脚始终位于页面底部？
在尝试创建精美的网站时,防止页脚在页面上浮动非常重要.内容较短的页面可能会遇到此问题,但只需几行 CSS 即可轻松修复.假设您的 HTML 看起来像下面的代码片段,这里有两种现代方法可以确保页脚始终位 ...
前端如何将页脚固定在页面底部
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
CSS实现页脚始终在页面底部
说明最近在布局自己的博客系统,我是想练练手把时下比较流行的前后端技术串起来.同时,我会把设计和编码过程中遇到的问题或值得分享的技术点.实现方式做下总结,记录下来.本篇就是第一篇,个人能力有限,不足之 ...
如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
html 在div 底部显示不出来,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
html5页脚最低下,页面底部或内容的页脚，以较低者为准
Ryan Fait的粘性页脚非常好,但我发现它的基本结构缺乏*. Flexbox版本如果你足够幸运,你可以使用flexbox而不需要支持旧的浏览器,粘性页脚变得非常简单,并支持动态大小的页脚. 使用 ...
php架在底部页面,将页脚固定在页面底部的CSS实战
页脚的位置问题网页的页脚(footer),也就是通常用来放置帮助链接及版权信息的地方.页脚自然是应该位于页面底部的,但依照一般的做法,如果位于页脚之前的网页内容比较少,或者说使用了一个垂直分辨率较大 ...

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

Hello, World!

Hello, World!

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

最新文章

热门文章