html 之 footer位于底端
html 之 footer位于底端
L很失败L 发表于1年前
html 之 footer位于底端
  • 发表于 1年前
  • 阅读 20
  • 收藏 1
  • 点赞 0
  • 评论 0

华为云·免费上云实践>>>   

摘要: 综合并比较几种将footer至于底端的方法,以供以后复习用

自己在折腾自己的blog时遇到这样的问题,想加一个footer,可位置却不能准确保证在页面底端.

在 stackoverflow 找到了几种答案,这里自己实际使用加分析一哈.

首先,参考了 CSS Sticky Footer 用css实现了将footer固定在底端.经过一番分析,提取出关键的样式

html, body, #container { height: 100%; margin: 0; padding: 0; }
body > #container { height: auto; min-height: 100%; }
/*定位*/
#footer { clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em; }
/*theme*/
#footer { background-color: black; color: white; font-size: 200%; text-align: center; line-height: 3em; }

这里面更关键的是

html{
    height: 100%;
}

这个关系到页面的大小,如果没有设置,会看到footer确实在底端,但是是页面的底端,如果页面高度较小,footer悬在半空中.

于是很容易想到另一种办法,将上面关于footer的定位样式替换成这样

#footer { clear: both; position: relative; bottom: 0; }

这样写,对页面高度是一样有要求的,需要用到上面的html高度的设定.

在 stackoverflow 上的回答有说position用fixed的,实际试用后,确实起到了至于底端的效果,但是存在的问题是footer会遮挡一部分的其他元素.

其他的就不对比了.

标签: 前端 footer定位
共有 人打赏支持
粉丝 3
博文 14
码字总数 7388
×
L很失败L
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: