文档章节

CSS 绝对底部

山哥
 山哥
发布于 2016/11/30 15:05
字数 1203
阅读 34
收藏 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
博文 351
码字总数 136465
作品 0
南京
程序员
简单返回顶部代码及注释说明

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

lovethe51cto
2015/08/12
0
0
在div中使用css让文字底部对齐的方法

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

小星星程序员
2014/11/13
0
0
页面架构——居中布局

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

陈老板_
01/16
0
0
前端开发:页脚固定顶部的方法

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

issac宝华
2016/06/19
32
0
css 元素绝对定位后,怎么撑开页面

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

张_良
2017/07/08
57
1

没有更多内容

加载失败,请刷新页面

加载更多

js 操作cookie

var cookie = {// 设置cookie方法 set:function(key,val,time){ // 获取当前时间 var date = new Date(); // 将date设置为n天以后的时间 var exp...

小丶二
5分钟前
0
0
限制root远程登录 su和sudo命令

9月21日任务 3.7 su命令 3.8 sudo命令 3.9 限制root远程登录 对于Linux而言,权限的重要性毋庸置疑!对于普通用户而言无法执行那些只有root用户才能有效的命令,导致工作无法有效进行; 系统...

robertt15
7分钟前
0
0
MQTT协议的初浅认识之通讯级别和持久会话

背景 这是我最近了解MQTT协议的最后一部分内容了,MQTT协议里面的QOS和Keep Alive是两个比较重要的内容。QOS的设置,直接影响了订阅客户端与中间件之间的消息交互行为。而Keep Alive直接影响...

亚林瓜子
9分钟前
0
0
calc

width: calc(100% - 30px); 特别注意:减号左右空格,均不能去掉。 width: calc(100% - 30px);

柴高八斗之父
17分钟前
0
0
Spring Cloud Gateway全局过滤器GlobalFilter:返回消息和重定向

Spring Cloud Gateway的全局过滤器GlobalFilter,顾名思义,声明后会对所有的请求生效,可以用来做权限控制,这里简单记录一下拦截到非法请求后如何返回自定义信息和将请求重定向到指定URL。...

夜雨寄北09
20分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部