文档章节

html 之 footer位于底端

L很失败L
 L很失败L
发布于 2016/06/24 10:03
字数 341
阅读 22
收藏 1
点赞 0
评论 0

自己在折腾自己的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
围住浮动元素的三种方法

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

nibilly
2015/10/19
56
0
【初探移动前端开发03】jQuery Mobile(上)

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

范大脚脚
2017/12/14
0
0
Compass的模块介绍

Compass采用模块结构,不同模块提供不同的功能。目前,它内置五个模块:   * reset   * css3   * layout   * typography   * utilities 下面,我依次介绍这五个内置模块。它们提供...

楠木楠
2016/12/07
21
0
如何使用Flexbox和CSS Grid,实现高效布局

CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想。幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来...

powertoolsteam
2017/09/20
0
0
如何使用Flexbox和CSS Grid,实现高效布局

CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想。幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来...

powertoolsteam
2017/09/20
0
0
ionic教程之基本布局

目录: 简介 Hybrid vs. Others ionic CSS框架 基本布局 布局模式 定高条块:.bar .bar : 位置 .bar : 嵌入子元素 .bar : 嵌入input 内容:.content和.scroll-content Hybrid vs. Others 要开...

汇智网
2017/09/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
1
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
1
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
0
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
0
0
Java工具类—随机数

Java中常用的生成随机数有Math.random()方法及java.util.Random类.但他们生成的随机数都是伪随机的. Math.radom()方法 在jdk1.8的Math类中可以看到,Math.random()方法实际上就是调用Random类...

PrivateO2
今天
1
0
关于java内存模型、并发编程的好文

Java并发编程:volatile关键字解析    volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在...

DannyCoder
昨天
0
0
dubbo @Reference retries 重试次数 一个坑

在代码一中设置 成retries=0,也就是调用超时不用重试,结果DEBUG的时候总是重试,不是0吗,0就不用重试啊。为什么还是调用了多次呢? 结果在网上看到 这篇文章才明白 https://www.cnblogs....

奋斗的小牛
昨天
2
0
数据结构与算法3

要抓紧喽~~~~~~~放羊的孩纸回来喽 LowArray类和LowArrayApp类 程序将一个普通的Java数组封装在LowArray类中。类中的数组隐藏了起来,它是私有的,所以只有类自己的方法才能访问他。 LowArray...

沉迷于编程的小菜菜
昨天
0
0
spring boot应用测试框架介绍

一、spring boot应用测试存在的问题 官方提供的测试框架spring-boot-test-starter,虽然提供了很多功能(junit、spring test、assertj、hamcrest、mockito、jsonassert、jsonpath),但是在数...

yangjianzhou
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部