请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 212|回复: 9

定位页面的“footer”

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-27 22:39:18 | 显示全部楼层 |阅读模式

基本思路

首先考虑外层设置一个容器div,id设为#container,使他的高度为浏览器窗口的高度,然后将#footer这个div设置为#container的子div,并使用绝对定位的方式,使他固定到 #container 的底端,以实现希望的效果。

点击这里察看案例页面效果。改变浏览器的高度和宽度,可以看到Footer部分的效果。

代码实现

下面先考虑HTML结构,这个演示页面的HTML代码非常简单。

<div id="container">
<div id="content">
<h1>Content</h1>
<p>请改变浏览器窗口的高度,以观察footer效果。</p>
<p>这里是示例文字,………,这里是示例文字。</p>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>

然后设置CSS,

body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#container {
min-height:100%;
position: relative;
}
#content {
padding: 10px;
padding-bottom: 60px;
/* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}

1:首先要给 html 和 body 元素设置高度(height属性)为100% (第5行),这样先保证根元素的高度撑满整个浏览器窗口,然后下面才能使 #container 的高度撑满整个浏览器窗口。至于为什么用同时设置 html 和 body 元素,是因为 Firefox 和 IE 认为的根元素不一样,因此这里都给他们设置上。

2:然后把 #container 的高度也设置为 100% (第8行),但是要注意,这里使用了“min-height”属性,而不是普通的 height 属性,这是因为我们要考虑到,如果 #content 中的内容如果增加了,他的高度超过了浏览器窗口的高度,那么如果把 #container 的高度仍然是 100%,就会导致 #footer 仍然定位在浏器窗口的下端,从而遮盖了 #content 中的内容。而使用 min-height 属性的作用就是使 #container 的高度“至少”为浏览器窗口的高度,而当如果它里面的内容增加了,他的高度会也跟随着增加,这才是我们需要的效果。

但是需要说明的是,在 Firefox 和 IE7 中,支持 min-height 属性,而 IE6 中,并不支持 min-height 属性,但是“歪打正着”的是,IE6 中,会把 min-height 属性解释为 height 属性,但是 IE6 中 height 属性的效果却是 min-height 本来应该具有的效果,也就是说,在 IE6 中,子 div 的高度会撑大父 div 的高度。所以这样正好可以实现在 IE6、IE7 和 Firefox 中都可以正确实现我们希望的效果了。

3:接下来,将 #container 设置为相对定位(第9行),目的是使他成为它里面的 #footer 的定位基准,也就是所谓的“最近的定位过的祖先元素”。

4:然后把 #foooter 设置为绝对定位(第17行),并使之贴在 #container 的最下端(第18行)。

5:但是要注意,如果当我们把 #foooter 贴在 #container 的最下端以后,他实际上已经和上面的 #content 这个div 重叠了,为了避免覆盖 #content 中的内容,我们在 #contetn 中设置了下侧的 padding,使 padding-bottom 的值等于 #footer 的高度(第13行),就可以保证避免覆盖 #content 的文字了,这个高度的计算注意代码中的注释中给出的计算方法(第14行)。


回复

使用道具 举报

0

主题

918

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-3-12 21:05:24 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

1

主题

910

帖子

5

积分

注册会员

Rank: 2

积分
5
发表于 2016-3-20 16:52:55 | 显示全部楼层
这个资料非常不错,好东东!
回复 支持 反对

使用道具 举报

1

主题

1066

帖子

76

积分

注册会员

Rank: 2

积分
76
发表于 2016-3-26 17:39:40 | 显示全部楼层
有些不是太明白,研究研究再说
回复 支持 反对

使用道具 举报

0

主题

775

帖子

783

积分

高级会员

Rank: 4

积分
783
发表于 2016-7-17 17:26:51 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

2

主题

975

帖子

83

积分

注册会员

Rank: 2

积分
83
发表于 2016-8-6 16:50:16 | 显示全部楼层
请问大家有什么看法?我绝对喜欢这个帖子
回复 支持 反对

使用道具 举报

2

主题

941

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2016-12-28 13:18:24 | 显示全部楼层
好啊楼主,没想到啊,太好了
回复 支持 反对

使用道具 举报

0

主题

918

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2017-10-12 18:38:01 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

7

主题

854

帖子

65

积分

注册会员

Rank: 2

积分
65
发表于 2017-12-3 10:36:03 | 显示全部楼层
顶顶
回复 支持 反对

使用道具 举报

0

主题

890

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2018-11-25 15:10:59 | 显示全部楼层
顶楼主,帮你顶个贴,我挣个积分
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-12-14 22:31 , Processed in 0.227985 second(s), 31 queries .

快速回复 返回顶部 返回列表