首页 > 代码库 > CSS + DIV 让页脚始终底部
CSS + DIV 让页脚始终底部
一 前言
经常设计页面时用到三层DIV，头DIV与脚DIV一般固定高度，而中间层DIV根据内容的多少，高度不定，我们经常希望但内容很少时，脚DIV保持在底部，当内容很多时，脚DIV被中间内容挤到下面，但仍然始终保持在底部。
二 position
position有四个参数：static | relative | absolute | fixed
position:static，意味元素没有被定位，元素会出现在文档本该出现位置，是页面元素默认的定位的方式，一般无需指定，除非想要覆盖之前设置的定位。
position:relative,很明白，相对元素本该位置的偏移量
#nav{ position:relative; top:15px; left:20px; }
position:absolute,这时候元素已经脱离了文档，文档中已经没有自己的本该的位置了，但我们可以通过left、bottom、left和right来规定其在文档中位置。
#nav{ postion:absolute; botton:0px;}
我们知道万物都是相对的，元素进行上面设置了后就保证nav元素始终保持在底部了呢？nav元素离botton为0px,是哪个为参照物呢，是父级元素还还是浏览器呢，其实这里分为两种情况：
如果父级元素（父级元素的父级、父级的父级的父级......）设置postion时，则子元素此时相对的是父级的，所以当内容过多时，脚DIV不能被挤到底部去。
如果父级元素（父级元素的父级、父级的父级的父级......）没有设置postion时，则子元素此时相对的是浏览器的，所以当内容过少时，脚DIV不能被调到底部去。
二 完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS + DIV 让页脚始终底部</title> <meta name="generator" content="" /><style type="text/css">body{ margin:0; padding:0; font:12px/1.5 tahoma,arial,‘Hiragino Sans GB‘,\5b8b\4f53,sans-serif; position:absolute;width:100%;min-height:100%; } .content{ padding-bottom: 54px; } a:link,a:visited,a:active{color:#00749E;text-decoration:none;}a:hover{color:#000;text-decoration:underline;} #header{width:980px;height:69px;margin:0 auto;padding:0;}#header h1.blogtitle{font-family:Arial, Helvetica, sans-serif;margin:0;padding:10px 0 0;}#header p.desc{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px;margin:0;padding:0;}#top{background-color:#fff;background-image:url(images/topbck.gif);background-repeat:repeat-x;height:34px;} #ddnav{background-color:#312e2e;height:35px;margin:0;padding:0;}#nav{height:25px;width:980px;font-weight:700;margin:0 auto;padding:10px 0 0;}ul.nav{height:25px;line-height:25px;float:left;list-style:none;font-size:11px;text-transform:inherit;margin:0;padding:0;}ul.nav li{float:left !important;list-style-type:none;border-right:2px solid #312e2e;margin:0;padding:0;}ul.nav li a,ul.nav li a:link,ul.nav li a:visited{background:url(images/navsilver.gif) repeat-x;color:#818181;float:left;display:block;text-decoration:none;padding:0 15px;}ul.nav li a:hover,ul.nav li a:active {background:url(images/navblue.gif) repeat-x;color:#205387;text-decoration:none;}ul.nav li.current_page_item a{text-decoration:none;background:url(images/navblue.gif) repeat-x;color:#fff;}ul.nav li ul{float:left;margin:0;padding:0;}#footer{background-image:url(images/footerbck.gif);background-repeat:repeat-x;clear:both;height:24px;margin:0;padding:0;position:absolute;bottom:30px;width:100%;}#footerbox{color:#fff;background-color:#312e2e;height:30px;line-height:30px !important;margin:0;padding:0;clear:both;position:absolute;bottom:0px;width:100%;}.footer{width:980px;color:#fff;height:30px;line-height:30px !important;margin:0 auto;padding:0;}.footer a:hover{text-decoration:underline;color:#fff;border:none;}.footer a:link,.footer a:active,.footer a:visited{text-decoration:underline;color:#25aacd;border:none;}#top{background-color:#fff;background-image:url(images/topbck.gif);background-repeat:repeat-x;height:34px;} </style><script type="text/javascript">function aboutFunc(){window.document.getElementById("about").style.display="";}function indexFunc(){window.document.getElementById("about").style.display="none";}</script></head><body><div id="header"> <h1 class="blogtitle"> <a href="http://www.cnblogs.com/chenyuming507950417/">助你软件工作室</a> </h1> <p class="desc">二十八年，我用青春修行</p></div><div id="ddnav"> <div id="nav"> <ul class="nav"> <li><a href="http://www.mamicode.com/#" onclick="indexFunc();">主页</a></li> </ul> <ul class="nav"> <li><a href="http://www.mamicode.com/#" onclick="aboutFunc();">关于</a></li> </ul> </div></div> <div id="top"> </div><div class="content"> <div id="post-e0a6ac53-c204-4919-9fda-2021397c40b8"> <p><p class="MsoNormal" style="margin-bottom: 7.5pt; text-align: center; mso-pagination: widow-orphan;" align="center"> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">麦子，你是怎样长进我的眼睛</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span> </strong><strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">你站立的土地一直站着我的双脚</span> </strong><strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">我们同根而生，是伙伴</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">只是我比你在泥土上住得更久</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">我一辈子是生活的奴隶，为了生计</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">一年一次，我用锋利的镰刀收割</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">你的麦芒对着天，从没刺伤我</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">为让我拿镰的手有更多的力气</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">你在一盘磨里走很长的路</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">把自己碾的粉身碎骨</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">我是在饥饿时学会了感恩</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">端起一碗饭就想你熟了的肤色</span> </strong><strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">想起在泥土上来回行走的季节</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">麦子，你年年回来吧，我年年爱你</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"></span></strong> </p></p> </div> <div id="about" style="display:none;"> <p><p class="MsoNormal" style="margin-bottom: 7.5pt; text-align: center; mso-pagination: widow-orphan;" align="center"> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">麦子，你是怎样长进我的眼睛</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span> </strong><strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">你站立的土地一直站着我的双脚</span> </strong><strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">我们同根而生，是伙伴</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">只是我比你在泥土上住得更久</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">我一辈子是生活的奴隶，为了生计</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">一年一次，我用锋利的镰刀收割</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">你的麦芒对着天，从没刺伤我</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">为让我拿镰的手有更多的力气</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">你在一盘磨里走很长的路</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">把自己碾的粉身碎骨</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">我是在饥饿时学会了感恩</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">端起一碗饭就想你熟了的肤色</span> </strong><strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">想起在泥土上来回行走的季节</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"><br /> </span></strong> <strong><span style="font-size: 14pt; font-family: 宋体;" lang="ZH">麦子，你年年回来吧，我年年爱你</span></strong> <strong><span style="font-size: 14pt; font-family: Arial;" lang="EN-US"></span></strong> </p></p> </div></div><div id="footer"></div><div id="footerbox"> <div class="footer"> <a href="http://www.cnblogs.com/chenyuming507950417/">助你软件工作室</a> 二十八年，我用青春修行 © Copyright 2014 </div></div> <body></html>
二 参考文章
（1）http://blog.davidqiu.com/post/2013-06-17/40051753968
（2）http://www.cnblogs.com/ahjesus/archive/2011/11/26/2263986.html
CSS + DIV 让页脚始终底部
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。