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

enterlind

于 2018-07-30 16:31:57 发布

阅读量552

点赞数

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

本文链接：https://blog.youkuaiyun.com/enterlind/article/details/81286794

版权

本文介绍了在PC和移动端实现sticky footer布局的四种方法：1）flex布局，适用于移动端但不兼容IE10以下；2）vh和calc计算高度，兼容IE9+，易于理解；3）footer相对定位，兼容ie7+，适用于PC端；4）footer添加负margin，也支持ie7+，但可能影响内容布局。作者鼓励读者分享更多实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　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 进行高度计算