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="#" onclick="indexFunc();">主页</a></li>
</ul>
<ul class="nav">
<li><a href="#" 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://lovecjh.com/">泥塘·物语</a> 渗透那青春年华的，是那些文字…… © Copyright
2017
</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 让页脚始终底部的更多相关文章
- CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
- 005-CSS让页脚始终在底部不论页面内容多少
让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部. 方案一: <!DOCTYPE html> <html> <head> <meta chars ...
- html 设置页脚div一直在页面底部
先上代码 <!DOCTYPE HTML> <html lang="en" style="height: 100%; width: 100%;" ...
- asp.net 母版-页脚制作
1.母版创建流程略过. 2.创建母版页css:Site.css body { } .linkButton{ text-decoration:none; color:whitesmoke; } 3.母版 ...
- 使用Bootstrap 3开发响应式网站实践07,页脚
页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...
- asp.net母版-页脚制作
1.母版创建流程略过 2.创建母版页css:Site.css body{ } .linkButton{ text-decoration:none; color:whitesmoke; } 3.母版页添 ...
- DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
- css - 紧贴底部的页脚
有的时候,由于页面长度不够,页面底部的页脚会很尴尬的跑上来,如图: 有的同学可能会想用position:fixed;bottom:0;来永远居底.但有些场景确实不适合. 这是我从YII2中找到的简单解 ...
- 【转载自W3CPLUS】如何将页脚固定在页面底部
该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...
随机推荐
- iOS 传值 委托(delegate)和block 对比
技术交流新QQ群:414971585 这篇文章建议和前一篇一起看, 另外先弄清楚IOS的block是神马东东. 委托和block是IOS上实现回调的两种机制.Block基本可以代替委托的功能,而且实 ...
- Linux跨服务器拷贝文件详解
要实现跨服务器拷贝文件,只需执行以下命令就可以: scp /temp/FastDFS_v3..tar.gz root@ip:/temp 拷文件夹如下: scp -r /webapps/xxx root ...
- 流编辑器－sed
sed 参数: 1.'s' 替换 sed 's/search-word/replace-word/' file-name 替换file-name文件中的search-word为replace-word ...
- 【转】excel 末尾是0 恢复数据方法
今天从数据库里面查了点数据,用plsql导出为csv数据后用excel打开后就出问题了,显示的问题,excel中会遇到一列中因为数字太长,结果变成了用科学计数法来表示,而这种损失不可逆的,及时改变其格 ...
- [转]js来弹出窗口的详细说明
1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...
- MyBatis代码自动生成(利用命令)
这几天在学习springmvc,需要用到mybatis,所以研究了一下mybatis自动代码生成,当然也可以手动敲,但是那样效率非常的慢,并且出错率也是很高的,利用MyBatis生成器自动生成实体类. ...
- MSER算法介绍
MSER代码编译: matlabroot %如果是VS2010则解压VS2010MEX支持文件到MATLAB根目录 unzip('E:\Software\develop Tools\VS2010MEX ...
- WebBrowser处理AJAX生成的网页内容！
WebBrowser处理AJAX生成的网页内容! 等待网页执行完毕(AJAX执行后). 使用webBrowser1.Document.Body.OuterHtml可以获取到AJAX产生的网页内容.
- CAN总线通信：实现MIC-3680与F28335 CAN总线通信的设置
博主原创: 实现MIC-3680与F28335 CAN总线通信的设置(MIC-3680CAN模块滤波使用单滤波模式): CAN2.0A协议: (使用11位标识符) <1>F28335发送, ...
- [Linux] - centos使用mount + nfs 远程共享存储
服务端安装nfs 1.使用yum安装nfs yum install nfs-utils nfs-utils-lib -y 如果安装过程出现这样的错误: 得先安装lvm2 yum install -y ...