所謂的sticky footer就是指:
當(dāng)頁(yè)面內(nèi)容超出屏幕,頁(yè)腳模塊會(huì)像正常頁(yè)面一樣呻率,被推到內(nèi)容下方,需要拖動(dòng)滾動(dòng)條才能看到
而當(dāng)頁(yè)面內(nèi)容小于屏幕高度,頁(yè)腳模塊會(huì)固定在屏幕底部宏浩,就像是底邊距為零的固定定位
當(dāng)內(nèi)容區(qū)域不夠時(shí):
當(dāng)內(nèi)容區(qū)域足夠長(zhǎng)時(shí):
? ? HTML:
? ? ? ? <div>我是頭部</div>
????????<div class="content" >
? ? ? ? ? ? <ul class="oUl" ></ul>
????????</div>
????????<div>我是底部</div>
CSS:
????????*{
????????????????margin: 0;
????????????????padding: 0;
????????}
????????html,body{
????????????height: 100%;
????????}
????????.content{
? ??????????min-height: 92%;
????????}
????????.header,.footer{
????????????height: 4%;
????????????width: 100%;
????????????background: darkgray;
????????????text-align: center;
????}
????????for( var i=0 ; i<108;i++ ){
????????????????var Li = "我是內(nèi)容"+i+"
????????????????"$(".oUl").append( Li )
????????}
????????????主要是在內(nèi)容區(qū)設(shè)置一個(gè)最低高度就可以了