CSS经典布局——sticky footer粘滞页脚

最新推荐文章于 2023-02-13 20:45:00 发布

mxydl2009

最新推荐文章于 2023-02-13 20:45:00 发布

阅读量468

点赞数

分类专栏： CSS方法文章标签： css 粘滞页脚 sticky footer

本文链接：https://blog.csdn.net/mxydl2009/article/details/105297644

版权

CSS方法专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简述

sticky footer粘滞页脚布局是经常使用的CSS经典布局之一，其表现形式是：页脚始终在视口的底部，不管是内容区内容较少不足以占据视口高度，还是内容区内容很多超过视口高度导致出现滚动条，页脚都处于视口的底部，并且不会遮住内容。

表现形式

内容区内容不多

粘滞页脚示意图

内容区内容很多

粘滞页脚示意图

HTML代码与CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css sticky footer</title>
	<style>
		* {
			margin: 0;
		}
		html, body {
			height:  100%;
		}
		.wrapper {
			min-height: 100%;
			margin-bottom: -32px;
		}
		.footer {
			height: 32px;
		} 
		.push {
			height: 32px;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="content">
			<p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
			<p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
			<!-- <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p>
			<p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> -->
		</div>
		<div class="push"></div>
	</div>
	<div class="footer" style="background: yellow">footer</div>
</body>
</html>

原理分析

margin为负值的意义

margin是盒模型的外边距，当为正时，表示盒模型向外扩张；当为负时，表示盒模型向内收缩，收缩从而留出的空间可以给外部元素使用。而这部分空间会占据原来盒模型的内边距和内容盒子，所以有可能会影响盒模型的内容。

内容区内容不多时

如果想要页脚始终在视口底部，那么内容区一定要占满视口（但需要留下页脚占据的空间）。要想达到这一步，首先内容区的高度就必须是视口高度的100%（视口可能会调整大小，所以只能用百分数），其次要通过margin-bottom为负值来给页脚留出空间。这时候在内容区内容不多时可以达到效果。如上图1。内容区的高度设为100%的前提是，其父元素有确定高度才行，所以body和html也需要设为100%（因为html元素是body的父元素，html元素的百分数相对于视口大小）。为了不让页脚遮住内容区的内容，需要在内容区下方增加一个空白的元素，让页脚遮住这个空白元素，所以这个空白元素高度与页脚高度一致。
CSS代码为

html, body {
  height: 100%;
}
.wrapper {
  height: 100%;
  margin-bottom: -32px;
}
.push {
  height: 32px;
}
.footer {
  height: 32px;
}

内容区内容很多超过视口高度

此时出现滚动条，页脚在视口底部，会遮住内容区的。因此我们需要将内容区的高度增加，这时候应该让内容区的高度随内容的高度自动增加，所以不能再使用height属性了，我们使用min-height属性来解决这个问题。
CSS代码为

.wrapper {
  min-height: 100%; // 删除上面CSS代码中的height，用min-height来代替;
}

总结

通过min-height和margin-bottom负值来得到sticky footer的经典CSS布局。需要注意有几点

第一，margin负值的意义指的是元素盒模型向内收缩空间，收缩留出来的空间可以给其他元素用。但要注意盒模型的内容可能会受到其他元素的影响，因为这部分空间会导致其他元素进入盒模型内部。

第二，height属性的百分数值有效的前提是父元素的高度必须是一个确定值（即多少像素）。或者该元素绝对定位，即使包含块的高度是auto值，也有效。这里有一个区别，绝对定位元素的百分比高度计算值的基准是包含块的padding box，而非绝对定位的元素，百分比高度计算值的基准是包含块的content box。

第三，使用min-height属性来对元素高度做限制。

mxydl2009

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录