頁面的頁腳不能延伸到頁面的底部

我的問題是，我有一個頁腳的頁面。如果沒有足夠的內容填充整個頁面，我希望頁面將頁腳擴展到瀏覽器窗口的底部。當內容超出瀏覽器的高度並且存在垂直滾動條時，我還想讓頁腳進入頁面的最底部。頁面的頁腳不能延伸到頁面的底部

出於某種原因，我不能得到這個工作，我跟着這個頁面上的教程：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

和教程具體說，它做什麼，我want- 「在很長的網頁，有很多內容的頁腳將可見頁面推到最底部，就像一個普通的網站一樣，當你一直向下滾動時，它就會出現，這意味着頁腳並不總是佔用寶貴的閱讀空間。

當我按照教程，當沒有足夠的內容來填充頁面時，它成功地將頁腳放在頁面的底部，但是當內容綽綽有餘時，頁腳過早地放置在瀏覽器窗口最初結束的位置因爲身體和所有容器的高度都設置爲窗口的高度，而不是整個頁面的高度（滾動頁面的高度）。

股利安排如下：

<div class="everything"> 
    <div class="main_content"></div> 
    <div class="template_footer"></div> 
</div>

我的CSS代碼：

html, body { 
     margin:0; 
     padding:0; 
     height:100%; 
    } 
    .everything{ //main container 
     width:100%; 
     min-width:960px; 
     max-width:1450px; 
     margin-left:auto; 
     margin-right:auto; 
     min-height:100%; 
     position:relative; 
    } 
    .main_content{ //body container 
     width:100%; 
     position:relative; 
     float:left; 
    } 
    .template_footer{ 
     width:100%; 
     height:44px; 
     background-color:rgba(0, 0, 0, .5); 
     position:absolute; 
     bottom:0; 
    }

我也嘗試了一堆隨高度並沒有什麼正常工作不同的變化，我已經搜查通過其他問題，他們似乎沒有具體回答這個問題。

來源

2014-10-06 user3552115

據我可以告訴代碼工作正常。 http://jsfiddle.net/xeggwa4q/。可能有其他一些CSS覆蓋了您在此處提供的內容。 – EternalHour 2014-10-06 03:25:56

@EternalHour你發佈的代碼也適用於我，但這是什麼不工作：http://jsfiddle.net/xeggwa4q/1/頁腳應該擴展到頁面的最底部，但你可以看到它在中間。 – user3552115 2014-10-06 03:40:08

@EternalHour我的歉意我搞砸了最後一個，http://jsfiddle.net/xeggwa4q/2/這是固定的，但你可以看到問題仍然存在。 – user3552115 2014-10-06 03:43:44

頁腳絕對位於.everything容器的底部。因此，無論內容如何，頁腳都會覆蓋容器的底部44像素。

來源

2014-10-06 03:20:27 JimmyRare

我意識到這一點，並知道如何解決這個問題，但我真正的問題是.everything容器的高度只是瀏覽器窗口的高度，而不是整個頁面的高度（包括高度，包括可滾動的高度有道理） – user3552115 2014-10-06 03:27:40

是的。 height屬性是相對於它的父項，在本例中是body。和身體的HTML文件。 html文檔與視口相關，因此您的容器與視口一樣高。 – JimmyRare 2014-10-06 03:30:26

啊，謝謝你。我正在尋找一種方法來使父頁擴展到頁面的大小而不是視口，並且您的評論讓我瞭解如何將父頁擴展爲子頁面的大小，因此我添加了overflow：auto;到一切div。現在正在工作。 – user3552115 2014-10-06 03:55:13

頁面的頁腳不能延伸到頁面的底部

回答

相關問題