sticky footer布局，页面不足一屏底部footer固定在视窗底部，否则底部footer自动向下顺延

最新推荐文章于 2022-09-28 13:25:05 发布

enterlind

最新推荐文章于 2022-09-28 13:25:05 发布

阅读量472

点赞数

分类专栏：布局类文章标签： html css sticky

本文链接：https://blog.csdn.net/enterlind/article/details/81286794

版权

　　sticky布局在pc端和移动端都有很大的需求，下面列举一下常用并亲测的几种方法。

1.flex布局方式实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>兼容ie10+</title>
	<style>
		*{margin: 0;padding: 0;}
		html,body{height: 100%;}
		.wrapper{
			height: 100%;
			display: flex;
			text-align: center;
			flex-direction:column;
		}
		.main{
			flex: 1;
		}
		.footer{
			height: 60px;
			background:#ccc;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="main">内容</div>
		<div class="footer">footer</div>
	</div>
</body>
</html>

这种方法在移动端经常使用，在pc端尤其是ie上，在ie10一下不兼容。

2.vh加clac 进行高度计算

<!DOCTYPE html>
<html lang="en

最低0.47元/天解锁文章

enterlind

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
sticky footer布局，页面不足一屏底部footer固定在视窗底部，否则底部footer自动向下顺延

　　sticky布局在pc端和移动端都有很大的需求，下面列举一下常用并亲测的几种方法。1.flex布局方式实现&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;兼容ie10+&lt;/title&gt; &am
复制链接

扫一扫