CSS关于底部div至于页脚

来源：互联网发布：淘宝可生成推广链接编辑：程序博客网时间：2024/05/01 22:04

在网站底部，我们需要放置一些版权申明之类的东西。有时候一个网页纵向内容太少，不够一页显示，正常div排版下来，这些东西就会跑到网站底部上方。类似这样

现在需要把上述两个div置底。为了达到这个目的，现构造一个html代码

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery.min.js"></script><link rel="stylesheet" type="text/css" href="css/business.css"><script type="text/javascript" src="js/business.js"></script><title></title></head>    <body><div class="wrap"></div><div id="foot">    <div id="foot-text"><div id="foot-left"><span id="out-connect" style="color: #cfe2f3; font-family:microsoft yahei">相关链接</span></br><a href="http://www.cxxx/pub/newsite/" target="blank" style='text-decoration:none;'>xxxx网</a></br><a href="http://fxxxcom.cn/" target="blank" style='text-decoration:none;'>xxxx网</a></br><a href="http://www.xxxxcom/" target="blank" style='text-decoration:none;'>xxx网</a></br><a href="http://xxxxney.com/" target="blank" style='text-decoration:none;'>xxxx网</a></br></div><div id="foot-right"><span id="contaction">联系我们</span></br><span>咨询电话：xxxxx4</span></br><span>传  真：0535-2xxxxx33</span></br><span>服务热线：40xxxx8</span></br><span>E-mail ： mxx@huxxxxg.com</span></br></div></div></div><div id="copyright">© 2010-2016 xxxxxxx有限公司 版权所有 浙ICP备11030066号</div></body></html>

为此添加相应的CSS代码

html,body {    margin:0;    padding:0;    position:absolute;    width:100%;    min-height:100%;   }/*关键是下面的position以及bottom的设置foot的bottom被设置为了30px，置于距离底部30px位置*/#foot {background-color: #3c78d8;height: 150px;width: 100%;min-width: 1000px;margin-top: 30px;clear: both;margin:0;padding:0;position:absolute;bottom:30px;}/*关键是下面的position以及bottom的设置copyright的bottom被设置为了0，置于最底部*/#copyright {height: 30px;background-color: #073763;text-align: center;font-family: "microsoft yahei";padding-top: 12px;width: 100%;clear: both;margin: 0;position: absolute;bottom: 0;}/*为了弥补上面foot的150px和copyright的30px，他们两个height数值，这个地方设置了180px，如果不这样做的话，当你把浏览器大小向上收起的时候，底部180px太大就会遮住正文内容*/.wrap {padding-bottom: 180px;}#foot #foot-text {width: 1000px;margin-left: auto;margin-right: auto;}#foot #foot-left {margin-top: 20px;float: left;display: inline-block;}#foot #foot-right {margin-top: 20px;float: right;display: inline-block;}#foot #foot-left a, #foot #foot-right span{font-family: "microsoft yahei";color: #cfe2f3;height: 16px;}

按照上述做就实现了预期功能，如果没有wrap的添加的话，往上拉就会覆盖180px区域显示，就会像下面这样

0 0