CSS：页脚紧贴底部

最新推荐文章于 2024-06-18 21:30:08 发布

weixin_34355715

最新推荐文章于 2024-06-18 21:30:08 发布

阅读量340

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1165991/blog/746765

版权

2019独角兽企业重金招聘Python工程师标准>>>

我的练习来源于《CSS揭秘》这本书第7章-41紧贴底部的页脚这部分内容以及书中提到的链接。

方案一

描述：以下方案简单、干净、现代并且没有hack，适用于IE8+, Chrome, Firefox, Opera等浏览器；不需要使用任何标签包裹，因为它是基于可变的body高度；这个解决方案诞生于2012年初，今天也许应该使用更好的方案比如flexbox。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>css紧贴底部的页脚</title>
</head>
<style type="text/css">
/*footer紧贴底部的主要代码*/
html{
	position: relative;
	min-height: 100%; 
}
body{
	margin: 0 0 100px;
}
footer{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 50px;
	width: 100%;
	background-color: green;/*设置颜色方便查看footer位置*/
}
/*调整内容的高度以查看footer紧贴底部的效果*/
.content{
	height: 100px;
}	
</style>
<body>
	<div class="content"></div>
	<footer></footer>
</body>
</html>

方案二

描述：使用display的flex属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>css紧贴底部的页脚</title>
</head>
<style type="text/css">
/*footer紧贴底部的主要代码*/
body{
	margin: 0;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}
footer{
	height: 50px;
	width: 100%;
	background-color: green;/*设置颜色方便查看footer位置*/
}
.content{
	flex: 1;
}	
</style>
<body>
	<div class="content"></div>
	<footer></footer>
</body>
</html>

方案三

描述：使用 calc()方法

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>css紧贴底部的页脚</title>
</head>
<style type="text/css">
/*footer紧贴底部的主要代码*/
body{
	margin: 0;
}
footer{
	height: 50px;
	width: 100%;
	background-color: green;/*设置颜色方便查看footer位置*/
}
.content{
	min-height: calc(100vh - 50px);
}	
</style>
<body>
	<div class="content">
		<div style="height:1000px;">这个div用来撑高度的</div>
	</div>
	<footer></footer>
</body>
</html>

（未完待续……）

参考：

http://mystrd.at/modern-clean-css-sticky-footer/【Modern Clean CSS “Sticky Footer”】
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/【Sticky Footer】
http://blog.sina.com.cn/s/blog_4c1e6a010102v6jp.html【vh是相对视口的高度】

转载于:https://my.oschina.net/u/1165991/blog/746765