在水平滾動的站點上將頁腳保持在 window 的底部

Question

我有一個完全水平滾動的網站，

TopNav（固定位置）

導航（固定位置）

內容（橫向滾動）

頁腳（固定位置）

一切似乎都很好，但我遇到的問題是，如果內容足夠大，可以水平滾動，它會將頁腳放在水平滾動條的后面，所以在幾頁上我做了 #footer { bottom:16px } 或所以要考慮水平滾動條在那里。

我遇到的問題是不同的顯示器分辨率。 顯然，內容將根據 window 大小水平滾動或不滾動。 有什么方法可以將頁腳保持在底部（或水平滾動條上方），無論分辨率或 window 大小如何？

Answer 1

經過大量試驗和錯誤，我發現這是始終在底部頁腳的最佳解決方案：

HTML：

<div class="footer">

    <div class="footer_contents"></div>

</div>

CSS：

.footer {

    height:24px; // Replace with the height your footer should be
    width: 100%; // Don't change
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    position: fixed;
    bottom: 0pt;
    left: 0pt;

}   

.footer_contents {

    height:24px; // Replace with the height your footer should be
    width: 1000px; // Visible width of footer
    margin:auto;

}

Answer 2

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

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#container {
    min-height:100%;
    position:relative;
}
#header {
    background:#ff0;
    padding:10px;
}
#body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
}

還有一個適用於 IE 6 和 IE 5.5 的簡單 CSS 規則：

#container {
    height:100%;
}

Answer 3

我看到了兩種可能性：

第一個選項強制正文始終顯示滾動條。 但這可能看起來很奇怪。

body { overflow-x: scroll; }

第二個選項讓您的內容容器始終在您的頁腳上方。 如果您的頁腳具有固定高度，這是可能的。 然后，您將在頁腳上方看到滾動條。

<div id="contentWrapper">
    <div id="content">Here comes your content</div>
</div>

我現在將在這里解釋 CSS

body, html {
    height: 100%;
    overflow: hidden;
}

#contentWrapper {
    overflow-x:auto;
    overflow-y: hidden;
    height: 100%;
    margin-top: -16px; // add the footer height
}

#content {
    padding-top: 16px; // add the footer height
    width: 6000px;
}

#contentWrapper在滾動條高度加上頁腳高度必須有一個負邊距。 #content必須與頂部填充具有相同的值，因此頂部的內容不會超出頁面。

Answer 4

我最好的想法是將廣泛的內容作為其自己的可滾動 div 的一部分。 然后，頁腳將留在內容底部的位置，看起來總是居中。

如果您希望滾動條不在頁腳上方，您可以使用 div 和一些 css 做一些花哨的事情，例如在寬內容下方放置一個與頁腳大小相同的空 div，並使真正的頁腳具有頂部：- （頁腳的高度）