伸展頁腳

Question

如何讓頁腳容器緊跟在內容之後，然後伸展到頁面的底部？

的設置是：

• 頭容器是固定的150像素高度
• 與任何內容應內部
• 頁腳容器遵循用於在網頁的其餘部分綿延內容容器延伸。

到目前爲止，我要麼在與空格內容後直接頁腳，或貼在底部的內容和頁腳之間的空白頁腳

Answer 1

實際的造型可以根據變化是否你確信你的網頁永遠不會滾動足夠長的時間。你可以經常使用身體標籤本身的技巧，但它不太靈活，不推薦。

這裏的想法是創建一個很長的頁腳div，並讓它包含在其中包含其餘內容的元素中。由於父項的溢出隱藏，div的實際長度將被忽略。

這通常顯示與反平衡底部填充，但在你的情況下，不應該需要。

<style> 
    html,body,.bigDiv{height:100%} 
    .header{height:150px} 
    .footer{height:2000px; background-color:green;} 
</style> 

<div class="bigDiv" style="overflow:hidden;"> 

    <div class="header"></div> 
    <div class="content"> 
     Content 
    </div> 
    <div class="footer"> 
     Footer 
    </div> 
</div>