14

我有一个完全水平滚动的网站，

TopNav（固定位置）

导航（固定位置）

内容（横向滚动）

页脚（固定位置）

一切似乎都很好，但我遇到的问题是，如果内容足够大，可以水平滚动，它会将页脚放在水平滚动条的后面，所以在几页上我做了 #footer { bottom:16px } 或所以要考虑水平滚动条在那里。

我遇到的问题是不同的显示器分辨率。显然，内容将根据窗口大小水平滚动或不滚动。有什么方法可以将页脚保持在底部（或水平滚动条上方），无论分辨率或窗口大小如何？

4

4 回答 4

32

经过大量试验和错误，我发现这是始终在底部页脚的最佳解决方案：

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;

}
于 2011-06-05T23:31:23.123 回答
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%;
}
于 2012-11-10T09:15:09.180 回答
0

我最好的想法是将广泛的内容作为其自己的可滚动 div 的一部分。然后，页脚将留在内容底部的位置，看起来总是居中。

如果您希望滚动条不在页脚上方，您可以使用 div 和一些 css 做一些花哨的事情，例如在宽内容下方放置一个与页脚大小相同的空 div，并使真正的页脚具有顶部：- （页脚的高度）

于 2011-05-25T17:07:18.583 回答
0

我看到了两种可能性：

第一个选项 强制正文始终显示滚动条。但这可能看起来很奇怪。

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值，因此顶部的内容不会出现在页面之外。

于 2011-05-25T16:43:43.723 回答