CSS+DIV讓頁尾始終底部

傑克.陳發表於2014-10-02
CSS
原文: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`,5b8b4f53,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

 


相關文章