css2.1的一些深入了解（4）黏连布局

最新推荐文章于 2020-12-03 21:54:27 发布

写bug的小气球

最新推荐文章于 2020-12-03 21:54:27 发布

阅读量115

点赞数

分类专栏：自学前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_46013619/article/details/103697266

版权

自学前端专栏收录该内容

42 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			html,body{
				height: 100%;
			}
			#wrap{
				min-height: 100%;
				/* 没有达到视口就100% 一旦内容越来越多，会被main撑开，所以设置最小高度 */
				background: pink;
				text-align: center;
			}
			#main{
				padding-bottom: 50px; 
				background: red;
			}
			#footer{
				background: #FF1493;
				height: 50px;
				line-height: 50px;
				text-align: center;
				margin-top: -50px;
				/* 这里会把footer挤到下面去，所以要让他上来 */
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="main">
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				main<br />
				
			
				main<br />
				1<br />
			</div>
		</div>
		<div id="footer">
			footor
		</div>
	</body>
</html>