把div固定于页面脚部（代码）

最新推荐文章于 2021-12-31 10:08:07 发布

雪上

最新推荐文章于 2021-12-31 10:08:07 发布

阅读量1.1k

点赞数

文章标签：页面脚部固定

本文链接：https://blog.csdn.net/xueshanghon_L/article/details/50987296

版权

暂时没时间编辑，直接上代码，以后再一一解释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title></title>
		<style type="text/css">
			html,body{
				height: 100%; 
			}
			*{
				padding: 0px;
				margin: 0px;
			}
			.header,.footer{
				font-size: 20px;
				font-weight: 800;
				width: 100%;
				height: 60px;
				line-height: 60px;
				text-align: center;
				color: white;
			}
			.header{
				background: rgba(0,0,0,0.5);
				margin-bottom: 10px;
			}
			.mian{
				min-height: 100%; 
				height: auto !important;
				padding-bottom: 60px;
				height: 100%;
				background: #CECECE;
			}
			
			.content{
				background: #FFFFFF;
				width: 90%;
				margin: 0px auto;
				box-shadow: 2px 0px 10px #000,
							0px 2px 10px #000;
				margin-top: 0px;
			}
			.footer{
				background: #FF4F01;
				position: relative;
				clear:both; 
				margin-top: -60px;
			}
		</style>
	</head>
	<body>
		<div class="mian">
			<header class="header">
				头部
			</header>
			<div class="content">
				<br /><br /><br /><br /><br /><br /><br /><br /><br />
				<br /><br /><br /><br /><br /><br /><br /><br /><br />
				<br /><br /><br /><br /><br /><br /><br /><br /><br />
				<br /><br /><br /><br /><br /><br /><br /><br /><br />
				<br /><br /><br /><br /><br /><br /><br /><br /><br />1
			</div>
			1
		</div>
		<footer class="footer">
			脚部
		</footer>
	</body>
</html>

雪上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
把div固定于页面脚部（代码）

暂时没时间编辑，直接上代码，以后再一一解释 html,body{ height: 100%; } *{ padding: 0px; margin: 0px; } .header,.footer{ font-size: 20px; font-weight: 800; width: 100
复制链接

扫一扫