运行一下下面的代码,就知道精妙之处了!
来自国外的设计达人,纯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