文档章节

CSS 绝对底部

山哥
 山哥
发布于 2016/11/30 15:05
字数 1203
阅读 31
收藏 0
点赞 0
评论 0

运行一下下面的代码,就知道精妙之处了!
       来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面。当改变窗口高度时,不会出现重叠问题。甚至,创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			html, body {
				height: 100%;
			}
			
			body > #wrap {
				height: auto;
				min-height: 100%;
			}
			
			#main {
				padding-bottom: 40px; /* 必须 >= footer高度 */
				background-color:#f2f2f2;
			}
			
			#footer {
				position: relative;
				margin-top: -40px; /* footer高度的负值 */
				height: 40px;
	
				background-color:#ff9800;
			}

		</style>
	</head>

	<body>
		<div id="wrap">
			<div id="main">
				<div>
					CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案。在CSS的世界里,似乎没有完美这种说法。所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧。 先说我们为什么会使用到这个CSS底部布局解决方案: 当做一个页面时,如果页面内容很少,不足于填充一屏的窗口区域,按普通的布局,就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部,而留下了大量空白。
				</div>
				<div>
					对于追未完美的设计师来说,这是不美观的。网上有一些解决方案,但会出现当改变窗口高度时,底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度,但设计嘛,追求的就是尽善尽美。下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面。当改变窗口高度时,不会出现重叠问题。甚至,创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)
				</div>
				<div>
					对于追未完美的设计师来说,这是不美观的。网上有一些解决方案,但会出现当改变窗口高度时,底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度,但设计嘛,追求的就是尽善尽美。下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面。当改变窗口高度时,不会出现重叠问题。甚至,创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)
				</div>
				 <div>
					对于追未完美的设计师来说,这是不美观的。网上有一些解决方案,但会出现当改变窗口高度时,底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度,但设计嘛,追求的就是尽善尽美。下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面。当改变窗口高度时,不会出现重叠问题。甚至,创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)
				</div>
				<div>
					对于追未完美的设计师来说,这是不美观的。网上有一些解决方案,但会出现当改变窗口高度时,底部和正文重叠的BUG。尽管没有多少人会有事没事儿的去改变窗口高度,但设计嘛,追求的就是尽善尽美。下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面。当改变窗口高度时,不会出现重叠问题。甚至,创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)
				</div>
				<p>11112223334444555555</p>
			</div>
		</div>
		
		<div id="footer">卧槽</div>
		
	</body>

</html>

 

本文转载自:https://www.talkingcoder.com/article/6357134459531104637

共有 人打赏支持
山哥

山哥

粉丝 242
博文 306
码字总数 136465
作品 0
南京
程序员
简单返回顶部代码及注释说明

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 返回顶部 方法二:操作scrooll函数用...

lovethe51cto ⋅ 2015/08/12 ⋅ 0

在div中使用css让文字底部对齐的方法

css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对齐,并且靠近的距离可以调节,精确到像素,在网上搜集到三段代码如下。...

小星星程序员 ⋅ 2014/11/13 ⋅ 0

页面架构——居中布局

水平居中 使用inline-block+text-align实现子模块在父模块中居中 例: 优点:兼容性比较好,能兼容IE6,7 使用table+margin 例: 优点:不需要设置父元素 使用absolute+transform 优点:绝对...

陈老板_ ⋅ 01/16 ⋅ 0

前端开发:页脚固定顶部的方法

1 将html、body的高度设为100%,这样是为了使用body的子元素height:100%;生效(在我的另一篇博文有详细说明): 2 基本布局: 3 对容器进行css处理: 4 对页脚进行css处理: Tip: 页脚要对...

issac宝华 ⋅ 2016/06/19 ⋅ 0

css 元素绝对定位后,怎么撑开页面

如图,是手机端页面的样式设计。 一个框就是一个div, main部分需要做动画,与head部分会有重合,所以做了绝对定位。 foot部分是底部的一些图片,需要固定在底部,也做了绝对定位。 现在做了...

张_良 ⋅ 2017/07/08 ⋅ 1

.如何将页脚固定在页面底部

作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响...

Minho ⋅ 2012/03/08 ⋅ 0

常用CSS记录

使底部对齐: vertical-align : text-bottom 不换行: white-space : nowrap; 文字位置 text-align : left; 外边边框、内边框 padding : 10px;margin : 20px; 元素定位: h2 { position:abso......

玄影镜心 ⋅ 2015/07/14 ⋅ 0

CSS可能导致的常见问题以及如何解决它们

  CSS是一团糟。在1995年首次引入,它的意思是风格的基本文本文件。不是网站。不是应用程序文本文件。从那以后,它已经走过了很长的一段路。可能有点太长了。      许多事情并不像多列...

爱码农 ⋅ 2017/12/25 ⋅ 0

CSS实现Sticky Footer

什么是 “Sticky Footer” 所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚...

流口水流 ⋅ 2017/11/19 ⋅ 0

CSS Positioning(定位)

Positioning(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。 元素可以使用的顶部,底部,左侧和右侧属性定位。...

wybo521 ⋅ 2016/01/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何解决s权限位引发postfix及crontab异常

一、问题现象 业务反馈某台应用服务器,普通用户使用mutt程序发送邮件时,提示“postdrop warning: mail_queue_enter: create file maildrop/713410.6065: Permission denied”,而且普通用法...

问题终结者 ⋅ 29分钟前 ⋅ 0

Unable to load database on disk

由于磁盘空间满了以后,导致zookeeper异常退出,清理磁盘空间后,zk启动报错,信息如下: 2018-06-25 17:18:46,904 INFO org.apache.zookeeper.server.quorum.QuorumPeerConfig: Reading co...

刀锋 ⋅ 48分钟前 ⋅ 0

css3 box-sizing:border-box 实现div一行多列

<!DOCTYPE html><html><head><style> div.container{ background:green; padding:10px 10px;}div.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Fir......

qimh ⋅ 54分钟前 ⋅ 0

Homebrew简介和基本使用

一、Homebrew是什么 Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径...

说回答 ⋅ 今天 ⋅ 0

文件压缩和打包zip、tar

第六章 文件压缩和打包 6.5 zip压缩工具 zip命令可以用来解压缩文件,或者对文件进行打包操作。zip是个使用广泛的压缩程序,文件经它压缩后会另外产生具有“.zip”扩展名的压缩文件。 注意:...

弓正 ⋅ 今天 ⋅ 0

vuex

一、状态对象如何赋值给内部对象。三种方式: 1、使用computed赋值,一定要写this,不然找不到$store。 computed:{ count(){ return this.$store.state.count; }} 2、通...

大美琴 ⋅ 今天 ⋅ 0

javaScript 设计模式

1、构造函数模式 ` /** 构造一个动物的函数 */ function Animal(name, color){ this.name = name; this.color = color; this.getName = function(){ return this.name; } } // 实例一个对象 ......

fangPeng_ ⋅ 今天 ⋅ 0

日常嘚瑟:TeamCity构建中解压和打包tar

要弄一个新的构建,很简单,从两个构建的tar格式Artifact中分别取一部分,重新打一个tar。 所以,我去写个脚本用curl下载两个依赖的Artifact,然后解压移动重新打个tar? 开什么玩笑,我的技...

谷永权 ⋅ 今天 ⋅ 0

Istio官方文档中文版

阅读目录 Istio官方文档中文版 回到目录 Istio官方文档中文版 http://istio.doczh.cn/ https://istio.io/docs/concepts/what-is-istio/goals.html 为什么要使用Istio? 在从单体应用程序向分...

xiaomin0322 ⋅ 今天 ⋅ 0

CentOS 7 Omnibus 包安装 GitLab 并汉化记录

系统环境 操作系统:CentOS 7GitLab:gitlab-ce-10.8.4-ce.0.el7.x86_64.rpm 下载Omnibus安装包 使用国内镜像加速下载地址 # wget https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el......

admin_qing ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部