文档章节

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
关于相对布局的各种定位布局参数的总结

一、常用布局定位参数:Above、Below、Center 属性 描述 layout_above 该组件元素位于指定ID组件元素上方 layout_below 该组件元素位于指定ID组件元素下方 layout_centerInParent 指定该组件...

不不不不不好听
07/16
0
0
css之float和clear

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

亭芳
2014/04/13
0
0
【初探移动前端开发03】jQuery Mobile(上)

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

范大脚脚
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

.NET 知识整理笔记

1.Web.Config配置文件的节点操作 在Web.Config中写入 <configuration> <connectionStrings> <add name="conStr" connectionString="Data Source=IUCL8V4Y7NW5IRA\SQLEXPRESS;Initia......

Jokeny
28分钟前
1
0
Spring 声明式注解事务实现机制

Spring中注解事务实现机制 在使用@Transactional 注解管理事务时步骤很简单。但是如果对@Transactional理解不够透彻,很容易出现事务不起作用的情况。所以,在对@Transactional的实现机制要有...

狂奔的熊二
28分钟前
0
0
Fastjson - 详解SerializeFilter,格式化对象字段

遇到一个奇葩场景,维护一个老的程序, 应用换了个服务方. 要切接口. 但有以下问题. 接口逻辑稍有不同 , 需要自己按原接口文档,重组逻辑. 接口字段名,字段类型改动较大. 但还要按原接口文档返回...

ol_O_O_lo
29分钟前
1
0
一个小知识点---关于传递引用参数

如果传入引用参数 在方法内new 对象,其改变外层不可见 如下方式保持引用的有效性

职业搬砖20年
34分钟前
0
0
Oracle数据导入导出命令及参数介绍(Linux)

1.数据导出 exp system/123456 file=d:\backup\oracle\oracle%date:~0,10%.dmp owner=system log=d:\backup\oracle\oracle%date:~0,10%.log 2.数据导入 imp system/manager@TEST file=d:\d......

lyle_luo
34分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部