【原创】用CSS把DIV固定到最下面(别人那里抠来的)
思良:很多手机导航需要把他们固定到最下面,我们可以用CSS实现,下面代码,CSS只要前面第一行即可(position:fixed;bottom:0px;就能实现),后面的只是给他们个背景。
代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=0;">
<meta charset="UTF-8">
<style type="text/css">
.fixed{width:100%;height:62px;position:fixed;left:0%;bottom:0px;margin-left: 0px;background:#523817;}
.fixed a{width: 19.6%;height:62px;display:block;float: left;text-align:center;color: #fff;font-size: 1em;position: relative;border-right:1px solid #85735b;}
.fixed a.a1{background: url(../images/ico-nav-01.png) no-repeat center 8px;background-size: 52%;}
.fixed a.a2{background: url(../images/ico-nav-02.png) no-repeat center 8px;background-size: 55%;}
.fixed a.a3{background: url(../images/ico-nav-03.png) no-repeat center 10px;background-size: 43%;}
.fixed a.a4{background: url(../images/ico-nav-04.png) no-repeat center 11px;background-size: 55%;}
.fixed a.a5{background: url(../images/ico-nav-05.png) no-repeat center 8px;border-right:0px;background-size: 55%;}
.fixed a span{width:100%;position:absolute;left:0%;bottom:2px;text-align: center;display: block;}
</style>
</head>
<body>
<div class="fixed clearfix">
<a href="/" class="a1"><span>首页</span></a>
<a href="/" class="a2"><span>预订</span></a>
<a href="/" class="a3"><span>致电</span></a>
<a href="" class="a4"><span>微信</span></a>
<a href="/" class="a5"><span>地址</span></a>
</div>
</body>
</html>