Sticky Footer CSS無效

Question

我已經查看了stackoverflow和其他站點上的幾個主題，但是所提出的解決方案似乎都不適用於我。

問題是，無論我嘗試過什么，我仍然有一個滾動條添加到頁面，其高度與容器（包裝）div頂部的填充相同。 我只能通過擺弄容器div上的最小高度來實現它，這顯然不會一直有效，而且，這是一種非常草率的方式來處理它。 這是代碼。

HTML：

<body>
<div id="container">
    <div id="header"></div>
    <div id="content"></div>
</div>
<div id="footer"></div>
</body>

（我已經嘗試過里面和外面的頁腳，結果相同。）

這是相關的CSS：

html, body {
    height: 100%;
}

body > #container {
    height: auto;
    min-height: 100%;
}


#content {
    height: 100%;
    position: relative;
}

body {
    margin: 0;
    padding: 0;
    color: #FFF;
    background: /*image here*/;
    background-size: cover;
    overflow: auto;
}

#container {
    width: 100%;
    padding-top: 50px;
    position: relative;
}

#header {
    background: /*image here*/;
    height: 130px;
    box-shadow: 4px 2px 5px #000;

    border-top: 2px solid #F8F8F8;
    border-bottom: 2px solid #F8F8F8;

    overflow: hidden;
}

#footer {
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
    background-color: #FFF;
    clear: both;
}

那里可能有一些奇怪的溢出，但是他們已經在嘗試解決問題的不同點拋出它。 我使用覆蓋整個網站背景的背景圖像，以及標題的背景圖像。

任何擺弄溢出，高度，邊距/填充或相對/絕對/固定定位都會產生更糟糕的結果或相同的結果。

我試圖在沒有JS的情況下這樣做，但如果一切都失敗了，我願意訴諸於此。 如果是這樣的話，有人會介意給我一個相關的JS stackoverflow問題和/或教程嗎？

提前感謝任何建議。

Answer 1

您沒有提供您嘗試執行此操作的瀏覽器，但假設它是一個現代瀏覽器，我發現cleanstickyfooter技術效果最好。 （所有這些都歸功於Trevor Sheridan。）我在JSFiddle上創建了一個示例，以便您可以看到實現。 您可以根據需要調整寬度等。 第一個鏈接提供了很多很好的細節。

根據SO要求，這是HTML：

<body>
    <div id="wrapper">
        <div id="content_wrapper">
            <div id="content_inner_wrapper">
                <div>Site content will be contained here.</div>
            </div>
        </div>
    </div>
    <div id="footer_wrapper">
        <div id="footer_inner_wrapper">
            <div>The footer's content</div>
        </div>
    </div>
</body>

和CSS：

html, body {
    height: 100%;
}
body {
    margin: 0px;
    padding: 0px;
}
div#wrapper {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0px 0px -41px 0px;
}
div#footer_wrapper {
    width: 100%;
    height: 41px;
    background-color: red;
}
div#content_wrapper {
    width: 100%;
    padding: 0px 0px 41px 0px;
}
div#footer_wrapper, div#content_wrapper {
    min-width: 500px;
}
div#footer_inner_wrapper, div#content_inner_wrapper {
    width: 500px;
}

Sticky Footer CSS無效

問題描述

1 個解決方案

解決方案1
2 已采納 2013-07-09 20:46:48

Sticky Footer CSS無效

問題描述

1 個解決方案

解決方案1 2 已采納 2013-07-09 20:46:48

解決方案1
2 已采納 2013-07-09 20:46:48