使用CSS定位页面的“footer”

简介: colorandy读者提出这样一个关于页面布局的问题: “如果有一个footer层,我想让他固定出现在整个页面的最下方,不随着页面中的内容而变化,CSS中要怎样设?比如里面是一些版权信息。因为我整页的内容比较少,footer老跟着内容跑到上面去,很不美观。

colorandy读者提出这样一个关于页面布局的问题:

“如果有一个footer层,我想让他固定出现在整个页面的最下方,不随着页面中的内容而变化,CSS中要怎样设?比如里面是一些版权信息。因为我整页的内容比较少,footer老跟着内容跑到上面去,很不美观。”

这个问题如果在以前使用表格布局,并不困难,只要给页面的最外层表格高度设置为100%就可以了,然而,在Web标准的规范中,表格的高度已经属于废止的属性,应该避免使用,而且使用Web标准以后,也不在提倡使用表格布局了,那么是否有办法使用CSS来实现页面的页脚部分固定在浏览器底端呢?

下面就来讲解它的实现方法。

基本思路

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

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

代码实现

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

1
2
3
4
5
6
7
8
9
10
11
12
<body>
	<div id="container">
		<div id="content">
			<h1>Content</h1>
			<p>请改变浏览器窗口的高度,以观察footer效果。</p>
			<p>这里是示例文字,………,这里是示例文字。</p>
		</div>
		<div id="footer">
			<h1>Footer</h1>
		</div>
	</div>
</body>

然后设置CSS,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
	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属性,但是“歪打正着”的是,IE 6中,会把min-height属性解释为height属性,但是IE 6中height属性的效果却是min-height本来应该具有的效果,也就是说,在IE 6中,子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行)。

6:剩下的就没有更多技术需要解释了。如果读者对上面的解释还不十分理解,说明您对CSS的基本概念还了解得不够,先仔细把CSS的核心原理和基本概念彻底搞清楚,再来看这些代码就是很轻松的了。

点击这里察看案例页面效果。

案例总结

这个看起来并不复杂的代码,去包含了很多CSS的核心概念和原理,因此这里又回到了我们曾经多次给读者的建议上:一定要扎扎实实把CSS的核心原理搞清楚,特别是CSS的4大核心基石:盒子模型、标准流、浮动、定位。只有把这些核心基础掌握到烂熟于胸的程度,才能游刃有余地进行设计。

目录
相关文章
|
9月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
8月前
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
345 79
|
9月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
349 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
202 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
9月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
203 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
9月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
149 34
|
11月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
11月前
|
数据采集 前端开发 JavaScript
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
本文介绍了如何使用 Puppeteer 结合 CSS 选择器抓取动态网页中的关键元素,以亚航网站的特价机票信息为例,通过设置代理 IP、User-Agent 和 Cookie 等技术手段,有效提升爬虫策略,实现高效、稳定的爬取。
306 5
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
|
11月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。

热门文章

最新文章