文档章节

html 之 footer位于底端

L很失败L
 L很失败L
发布于 2016/06/24 10:03
字数 341
阅读 23
收藏 1

自己在折腾自己的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会遮挡一部分的其他元素.

其他的就不对比了.

© 著作权归作者所有

共有 人打赏支持
L很失败L
粉丝 2
博文 14
码字总数 7388
作品 0
合肥
程序员
私信 提问
Web项目有些页面整体自动右移8px的问题

最近在开发一个商城系统,前端页面都统一引用common.css,header.ftl和footer.ftl,宽度都是1150px。 然后出现这样一个问题,有些页面显示正常,有些页面却莫名其妙地整体右移了8px。 对比页面...

6pker
2015/01/16
0
0
listview加载数据

首先我们需要理清思路:使用ListView显示数据是很方便的,ListVIew的数据之间通过适配器adapter去作为桥梁连接起来。当我们需要使用listview显示大量数据的时候,我们需要使用到分页功能,比...

范大脚脚
2017/11/14
0
0
【初探移动前端开发03】jQuery Mobile(上)

前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看。 我们今天先学习一下jquery mobile...

范大脚脚
2017/12/14
0
0
css之float和clear

浮动元素 浮动元素位于“文档流”外部,因而它不包含在标记中的父元素之内。那么什么时候我们需要用到浮动元素呢?举个最简单的例子,例如有些blog,有header,section, footer,其中section...

亭芳
2014/04/13
0
0
围住浮动元素的三种方法

方法一:为父元素添加 overflow:hidden 第一个方法很简单,缺点是不太直观,即为父元素应用 overflow:hidden ,以强制它 包围浮动元素。 方法二:同时浮动父元素 第二种促使父元素包围其浮动...

nibilly
2015/10/19
56
0

没有更多内容

加载失败,请刷新页面

加载更多

apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
今天
1
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
7
0
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
3
0
Apache防盗链配置,Directory访问控制,FilesMatch进行访问控制

防盗链配置 通过限制referer来实现防盗链的功能 配置前,使用curl -e 指定referer [root@test-a test-webroot]# curl -e "http://www.test.com/1.html" -x127.0.0.1:80 "www.test.com/1.jpg......

野雪球
昨天
5
0
RxJava threading

因为Rx针对异步系统设计,并且Rx也自然支持多线程,所以新的Rx开发人员有时会假设Rx默认是多线程的。在其他任何事情之前,重要的是澄清Rx默认是单线程的。 除非另有说明,否则每次调用onNex...

woshixin
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部