CSS Sticky Footer布局

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

西风XF

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

阅读量453

点赞数

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

本文链接：https://blog.csdn.net/qq_36242361/article/details/76093893

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

效果：

1、若页面内容不够长时，页脚块粘贴在视窗底部（内容不够100%，页脚固定在页面底部）；

2、若页面内容足够长时，页脚会被内容向下推送（内容超过100%，页脚随着滚动，在页面底部）。

固定的html结构和固定的css布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>CSS Sticky Footer</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			height:100%;
			width:100%;
			overflow: hidden;
		}
		.oDiv{
			height:100%;
			width:100%;
			overflow: auto;
			background-color: rgba(7,17,27,.8);
			color:#fff;
		}
		.wrapper{
			width:100%;
			min-height:100%;
		}
		.content{
			padding-bottom: 60px;/*留出底部空间*/
		}
		.footer{
			position: relative;
			margin-top: -60px;/*显示底部内容*/
			height:60px;
			clear: both;
			box-sizing: border-box;
			border-top: 1px solid #ccc;
			text-align: center;
			line-height:60px;
		}
	</style>
	<body>
		<!--最外层div-->
		<div class="oDiv">
			<!--第二层div-wrapper-->
			<div class="wrapper">
				<!--第三层div-main-->
				<div class="content">
					content
					<!--ul若被注释,页面内容不超过100%,footer固定在页面底部-->
					<!--ul若未被注释,页面内容超出100%,滚动页面,footer在页面底部-->				
					<!--<ul>
						<li style="height:300px;width: 100%;background-color: #999;margin-bottom: 20px;text-align: center;line-height: 300px;">1</li>
						<li style="height:300px;width: 100%;background-color: #999;margin-bottom: 20px;text-align: center;line-height: 300px;">2</li>
						<li style="height:300px;width: 100%;background-color: #999;margin-bottom: 20px;text-align: center;line-height: 300px;">3</li>
					</ul>-->
				</div>
			</div>
			<!--第二层div-footer-->
			<div class="footer">
				footer
			</div>
		</div>
	</body>
</html>