Css Sticky Footer将页脚固定在页面底部

最新推荐文章于 2023-10-12 16:58:19 发布

木雷双雄7

最新推荐文章于 2023-10-12 16:58:19 发布

阅读量692

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/wlangmood/article/details/72518874

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

概述：Css Sticky Footer

如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

实现方法：

<!DOCTYPE html>
<html>
<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Css Sticky Footer</title>
    	<style>
		*{padding:0; margin:0}
		html,body{height:100%;}
		.wrapper{min-height:100%; height:100%; width: 100%;}
		.header{width:100%; height:100px;background-color:#999; }
		.main{padding-bottom:100px;}
		p{ height:800px; width:100%; background-color:green;}
		.footer{ position: relative;width:100%; height:100px; clear:both; margin:-100px auto 0; background-color:#666;}
		.clearfix{display:inline-block;}
		.clearfix:after{display:block;content:'.';height:0;line-height:0;clear:both;visibility:hidden;}
    	</style>
</head>
<body>
	<div class="wrapper">
		<div class="header"></div>
		<div class="main">
			<p></p>
		</div>
	</div>
	<div class="footer"></div>
</body>
</html>

总结：

1、可以通过改变p标签的高度，来查看底部的位置情况

2、main的padding-bottom值和footer的height值、margin-top负值要保持一致

3、wrapper的min-height值为100%，

4、html和body的height值为100%，wrapper继承父元素body的height

5、clearfix是清除浮动的Hack

木雷双雄7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css Sticky Footer将页脚固定在页面底部

概述：Css Sticky Footer如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。实现方法： Css Sticky Footer *{padding:0; margin:0} html,body{height:100%;} .wrapper{min-height:100%; heigh
复制链接

扫一扫

专栏目录