文档章节

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
css之float和clear

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

亭芳
2014/04/13
0
0
关于相对布局的各种定位布局参数的总结

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

不不不不不好听
2018/07/16
0
0
【初探移动前端开发03】jQuery Mobile(上)

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

范大脚脚
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
50分钟前
3
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
57分钟前
1
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
1
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
3
0
跟我学Spring Cloud(Finchley版)-15-Hystrix监控详解

Hystrix提供了监控Hystrix Command的能力,本节来详细探讨。 监控端点与数据 应用整合Hystrix,同时应用包含spring-boot-starter-actuator 依赖,就会存在一个/actuator/hystrix.stream 端点...

周立_ITMuch
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部