帶填充和邊距的粘性頁腳 - 在FF中工作，但Chrome和IE出現問題

我正在嘗試爲正在工作的網站實現粘性頁腳（see here）。我試圖按照指南CSS Sticky Footer - 具體地說，this實施。帶填充和邊距的粘性頁腳 - 在FF中工作，但Chrome和IE出現問題

在Firefox（13）中完美工作，但在Chrome（21）和IE（9）中，#footer會在頁面的更下方添加垂直滾動條。我認爲這與在我的#wrapper中使用填充和邊距有關 - 但是我無法專門針對這個問題。我真的很感謝一些幫助。

網站結構：

<html> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <div id="menu"></div> 
     <div id="page"></div> 
    </div> 
    <div id="footer"></div> 
</html>

及相關CSS：

#wrapper { 
    min-height: 100%; 
    width: 100%; 
} 
#header { 
background: url("/images/backgrounds/transparent.png") transparent; 
    border-bottom: 2px solid #EF7C31; 
    height: 44px; 
    margin: 0 auto 20px; 
    width: 960px; 
} 
#menu { 
background:#FFFFFF; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
    height: 60px; 
    margin: 0 auto 20px; 
    padding: 10px 20px; 
    width: 920px; 
} 
#page { 
background: #FFFFFF; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
    margin: 0 auto 30px; 
    overflow-x: hidden; 
    overflow-y: auto; 
    padding: 20px 20px 30px; 
    width: 920px 
} 
#footer { 
background: url("/images/backgrounds/transparent.png") transparent; 
    border-top: 2px solid #EF7C31; 
    clear: both; 
    height: 116px; 
    margin-top: -158px; 
    overflow: auto; 
    padding: 20px; 
    position: relative; 
}

謝謝

來源

2012-05-23 rwb

請附上相關特定代碼在這裏。我們不應該去查看您的網站，並通過整個網站雜草，以幫助您解決一個具體問題。如果你創建了一個只包含必要代碼的jsfiddle，它也會很有幫助，因此更容易測試人們推薦的更改。 –

@JoshMein感謝您的評論。我已在相關代碼中添加。我試圖創建一個jsfiddle，但繼續在Chrome和FF上找不到服務器fiddle.jshell.net？ – rwb

你檢查了我的解決方案嗎？我附上了一個現場演示，其中包含將會將頁腳推出網站的內容。然後，您可以刪除該內容並查看它仍然將頁腳粘貼到屏幕底部。我已經在IE，Firefox和Chrome中檢查過它，它在所有這些工具中都能正常工作。 –

此行添加到包裝：

overflow: hidden;

所以，你會有：

#wrapper { 
    min-height: 100%; 
    width: 100%; 
    overflow: hidden; 
}

或者在頁腳之前添加一個push div。這將推動頁腳下降。

來源

2012-05-23 12:49:02 RSM

編輯：對不起。只是測試一下。在垂直長頁面上，#page中的內容現在被推到#footer的後面（但它在完美的「短」頁面上很少有內容） – rwb

然後添加'height：auto;' – RSM

On #wrapper？我認爲這個問題源於我錯誤地應用填充底部#page – rwb

我注意到一些導致一些問題的事情。您鏈接到的教程在工作時被標記爲惡意，因此我一直使用Ryan Fait's CSS Sticky Footer Tutorial。

檢查你有什麼，我注意到一些差異。首先，您需要將html正文和高度設置爲100％，以便在所有瀏覽器中都能正常工作。其次，你的填充和你的邊框造成了問題，所以我創建了另一個div，它將包含腳本中的特定內容，並且會在其中包含填充和邊框CSS。

HTML：

<html> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <div id="menu"></div> 
     <div id="page"></div> 
     <div class="push"></div> 
    </div> 
    <div id="footer"> 
     <div class="footerContent"></div> 
    </div> 
</html>

CSS：

* { 
    margin: 0; 
} 

html, body { 
    height: 100%; 
} 

#wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    width:100%; 
    margin: 0 auto -158px; /* the bottom margin is the negative value of the footer's height */ 
} 

#footer, .push { 
    height: 158px; /* .push must be the same height as .footer */ 
} 

.footerContent { 
    border-top: 2px solid #EF7C31; 
    padding:20px; 
}

Live DEMO

來源

2012-05-23 12:50:22

帶填充和邊距的粘性頁腳 - 在FF中工作，但Chrome和IE出現問題

回答

相關問題