04.stickyfooter

最新推荐文章于 2024-08-26 22:59:32 发布

endingCode

最新推荐文章于 2024-08-26 22:59:32 发布

阅读量111

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44768421/article/details/109648935

版权

04.stickyfooter

在移动端，有时候我们希望一个元素始终处于页面底端，不会随着页面内容的变化而改变位置。这个元素我们称为stickyfooter。实现起来还是很简单的，通过继承把内容容器的最小高度设置为整个视口的大小，并且设置下内边距为footer留出空间。

少啰嗦上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
		<title>sticky_footer</title>
		<style>
			*{
				margin: 0;
				padding:0;
			}
			html,body{
				/* 继承整个视口的高度 */
				height: 100%;
			}
			#content,{
				overflow: hidden;
				/* 设置内容容器的最小高度为整个视口的大小 */
				min-height: 100%;
			}
			#content_in{
				/* 设置内容下边距 流出空白区域显示footer*/
				padding-bottom: 40px;
			}
			#footer{
				height: 40px;
				background-color: #FF4500;
				text-align: center;
				line-height: 40px;
				margin-top: -40px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div id="content_in">
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
				xxxxxx<br />
			</div>
		</div>
		<!-- 特别注意，footer一定要是body的直接子元素 -->
		<div id="footer">X</div>
	</body>
</html>

endingCode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04.stickyfooter

04.stickyfooter在移动端，有时候我们希望一个元素始终处于页面底端，不会随着页面内容的变化而改变位置。这个元素我们称为stickyfooter。实现起来还是很简单的，通过继承把内容容器的最小高度设置为整个视口的大小，并且设置下内边距为footer留出空间。少啰嗦上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" conte
复制链接

扫一扫