footer 貼在底部的布局實(shí)現(xiàn)代碼
發(fā)布時(shí)間：2009-10-20 17:03:22 作者：佚名 
我要評(píng)論
我要評(píng)論這個(gè)網(wǎng)頁(yè)即使內(nèi)容很少的情況下，它也始終在頁(yè)面的底部。否則頁(yè)面底部將留下大量空白。
footer位置自適應(yīng)
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
ccc
</div>
<div id="side">
sss
</div>
</div>
</div>
<div id="footer">
fff
</div>
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必須使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的負(fù)值 */
height: 150px;
background: #ddd;
clear: both;}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
復(fù)制代碼
代碼如下:<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
ccc
</div>
<div id="side">
sss
</div>
</div>
</div>
<div id="footer">
fff
</div>
復(fù)制代碼
代碼如下:html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必須使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的負(fù)值 */
height: 150px;
background: #ddd;
clear: both;}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
相關(guān)文章
html的footer置于頁(yè)面最底部的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇html的footer置于頁(yè)面最底部的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-13移動(dòng)端解決懸浮層（懸浮header、footer）會(huì)遮擋住內(nèi)容的3種方法
這篇文章主要介紹了移動(dòng)端解決懸浮層（懸浮header、footer）會(huì)遮擋住內(nèi)容的3種方法,本文講解如何解決移動(dòng)端懸浮層會(huì)遮擋住內(nèi)容的3種方法,需要的朋友可以參考下2015-03-27純css 實(shí)現(xiàn)footer 一直在頁(yè)面底部，不隨頁(yè)面滾動(dòng)
CSS的簡(jiǎn)單在于它易學(xué)，CSS的困難在于尋找更好的解決方案。在CSS的世界里，似乎沒(méi)有完美這種說(shuō)法。所以，現(xiàn)在介紹的CSS絕對(duì)底部，只是目前個(gè)人見(jiàn)過(guò)的方案中比較完美的吧。2014-09-02讓footer始終位于頁(yè)面的最底部不隨滾動(dòng)而滾動(dòng)
本節(jié)主要介紹了如何讓footer始終位于頁(yè)面的最底部不隨滾動(dòng)而滾動(dòng)，此效果在網(wǎng)頁(yè)中非常實(shí)用，建議大家好好學(xué)習(xí)哦2014-07-28div footer標(biāo)簽css實(shí)現(xiàn)位于頁(yè)面底部固定
Web頁(yè)面的“footer”部分隨著飄上來(lái)，處在頁(yè)面的半腰中間，給視覺(jué)效果帶來(lái)極大的影響，讓你的頁(yè)面看上去很不好看，特別是現(xiàn)在寬屏越來(lái)越多，這種現(xiàn)象更是常見(jiàn),本文將介紹兩2012-12-02利用CSS使footer固定在頁(yè)面底部的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇利用CSS使footer固定在頁(yè)面底部的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-13