CSS 绝对底部

最新推荐文章于 2023-05-11 20:14:30 发布

日月之食焉

最新推荐文章于 2023-05-11 20:14:30 发布

阅读量549

点赞数

分类专栏：前端文章标签： css 布局

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

运行一下下面的代码，就知道精妙之处了！

来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			html, body {
				height: 100%;
			}
			
			body > #wrap {
				height: auto;
				min-height: 100%;
			}
			
			#main {
				padding-bottom: 40px; /* 必须 >= footer高度 */
				background-color:#f2f2f2;
			}
			
			#footer {
				position: relative;
				margin-top: -40px; /* footer高度的负值 */
				height: 40px;
	
				background-color:#ff9800;
			}

		</style>
	</head>

	<body>
		<div id="wrap">
			<div id="main">
				<div>
					CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。 先说我们为什么会使用到这个CSS底部布局解决方案: 当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而留下了大量空白。
				</div>
			</div>
		</div>
		<div id="footer">底部</div>
		
	</body>

</html>

原文地址： https://www.talkingcoder.com/article/6357134459531104637

日月之食焉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 绝对底部

摘要: 来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)
复制链接

扫一扫

专栏目录