如何在頁面內容較短但未固定在CSS中時將頁腳粘貼到底部？

當內容長度小於屏幕高度時，如何製作粘貼在底部的頁腳，當內容長度超過屏幕高度時，將頁腳浮到內容底部？現在我正在這樣做。如何在頁面內容較短但未固定在CSS中時將頁腳粘貼到底部？

HTML

<body> 
<div class='container'> 

</div> 
<footer> 

</footer> 
</body>

CSS

.container{ 
    position:relative; 
    min-height:500px; 
} 

footer{ 
height:200px; 
background-color:black; 
position:absolute; 
bottom:0px; 
}

該代碼是罰款時，內容比屏幕尺寸更短或很短。但是我的問題是，當內容長得多（例如屏幕尺寸的兩倍）時，頁腳在第一次加載頁面時會粘在底部。但是當我向下滾動時，頁腳會堆疊到新滾動內容的頂部。那麼請我該如何實現它？

來源

2015-11-17 Wai Yan Hein

最好的方法，使用Bootstrap類'固定bottom'。 – WisdmLabs

他希望它在文檔的底部延伸到視口以外，但在視口的底部。 – PitaJ

欲瞭解更多有關粘腳的信息：http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page-having-fixed-header –

$(document).ready(function(){ 
    var containerHeight = $('.container').outerHeight(true); 
    var windowHeight = $('window').height(); 
    if(containerHeight < windowHeight){ 
     $('footer').css('position','fixed'); 
    } 
});

來源

2015-11-17 05:13:32

這是怎麼用jQuery做到的，但它應該用CSS完成。 – PitaJ

如果文檔中有圖像或需要使用'$（window）.load（）'，這會起作用嗎？ – dramzy

@PitaJ是的..我可以看到jQuery的標籤。所以這是一個jQuery的解決方案:) –

請按照結構來查看結果。

<div class="container"> 
     <div class="page-header">page-header</div> 
     <div class="page-content">page-content 
    <br/> 
     <div id="more-cont"></div> 
     <input type ="button"value="Add More Content" id="add-more"> 
    </div> 
     <div class="footer">footer</div> 
    </div> 

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
.container { 
    min-height:100%; 
    position:relative; 
} 
.page-header { 
    background:#ededed; 
    padding:10px; 
    background-color:green; 
    color:white; 
} 
.page-content { 
    padding-bottom:100px; /* Height of the footer element */ 
} 
.footer { 
    background:#ffab62; 
    width:100%; 
    height:100px; 
    position:absolute; 
    bottom:0; 
    left:0; 
}

請參閱demo

來源

2015-11-17 05:14:25

Demo

CSS代碼：

#footer { 
    position: fixed; 
    width: 100%; 
    clear: both; 
    bottom: 0; 
    padding: 0; 
    margin: 0; 
    height: 30px; 
    background: #333; 
}

來源

2015-11-17 05:18:07 Apb

我不想修復。當它被修復時，如果我獲得很長的內容，它仍然固定在屏幕的底部。不在內容的底部。 –

您可以輕鬆地通過添加min-height和padding身體和設置頁腳爲絕對定位要這樣做相對於它。

這裏是JSfiddle或者您可以使用運行代碼片段按鈕來查看結果。

body { 
 
    min-height: 100%; 
 
    padding-bottom: 200px; 
 
    position: relative; 
 
} 
 
footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 200px; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
/* just for demo */ 
 

 
.container { 
 
    height: 1000px; 
 
    border: 1px solid green; 
 
} 
 

 
footer { 
 
    border: 1px solid blue; 
 
}

<body> 
 
<div class='container'> 
 
    container stuff 
 
</div> 
 
<footer> 
 
    footer stuff 
 
</footer> 
 
</body>

來源

2015-11-17 05:26:35 PitaJ

如何在頁面內容較短但未固定在CSS中時將頁腳粘貼到底部？

回答

相關問題