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://www.cnblogs.com/chenyuming507950417/">助你软件工作室</a>&nbsp;&nbsp;&nbsp; 二十八年，我用青春修行&nbsp;&nbsp;&nbsp; &copy; 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

时间： 2024-09-14 20:41:34

CSS + DIV 让页脚始终底部的相关文章

CSS布局:让页脚始终保持底部的方法

有时候,我们用css创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容ie5.0+,opera 8.5+,firefox 1.5+.下面我们看步骤: 1.为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding.顺便提一下,经过我的

CSS实例:让页脚保持在未满屏页面的底部

在内容不超过一屏的情况下,当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部. Webjx.Com 当内容多出一屏时,他显示在网页的最下边,而不是窗口的最下边:测试了一下,还可以,在IE6.IE7.FF等都没有问题!窗口缩小时也没有问题! 首先是JS脚本: function test(){ var infoHeight = document.getElementById("info").scrollHeight; var bottomHeight = documen

用CSS让页脚始终保持底部的方法

有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法.下面我们看步骤: 1.为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding.顺便提一下,经过我的测试,html 和 body 的 height: 100%; 等于

页脚始终保持在页面底部的网页布局方法

网页|页面有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+.下面我们看步骤: 1.为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding.顺便提一

div+css如何实现页脚的置底_经验交流

将一个对象定位在页面底部并随页面滚动 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

将页脚固定在页面底部的CSS实战

页脚的位置问题网页的页脚(footer),也就是通常用来放置帮助链接及版权信息的地方.页脚自然是应该位于页面底部的,但依照一般的做法,如果位于页脚之前的网页内容比较少,或者说使用了一个垂直分辨率较大的显示器,就有可能出现页脚看起来不在页面底部的情况,如下图. 由于页脚基本上是一个网站的所有页面公用的部分,不同页面的内容量有所差异,因此确实有可能某些页面内容不够而出现这样的问题.另外,尤其是包含了底色的页脚,发生这种问题会很影响美观. 所以,我们希望页脚能够无论网页内容量多少,都准确地位于底

最小高度100％页脚保持在底部的布局方法

有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+.下面我们看步骤: 1.为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding.顺便提一下,经过我的

最小高度100%页脚保持在底部的方法

用WPS Office2007制作个性化的页眉和页脚

我们看到,在WPS Office2007 版面设计方面,相对于报纸来说,杂志的版面要更简单些,编辑起来也更容易些,大多数内容都可以用分栏和插入文本框的方法来实现.关于分栏的问题,我们以前已经有所介绍,这里就不重复了. 与报纸不同的是,杂志的页眉页脚通常比较个性化,如图1所示,页眉中有个性图标.栏目名称.责任编辑以及投稿地址等内容.这些内容随专栏的不同而变化,主要是应用了"分节符",将不同的章节(或杂志的专栏)用"分节符"分开,再分别在各栏插入不同的内容即可.需要注意

CSS + DIV 让页脚始终底部

一 前言

二 position

二 完整代码

二 参考文章

CSS + DIV 让页脚始终底部的相关文章

一　　前言

二　　position

二　　完整代码

二　　参考文章