将页脚保持在水平滚动的窗口底部

问题描述

| 我有一个完全水平的滚动站点， TopNav（固定位置） 导航（固定位置） 内容（横向滚动） 页脚（固定位置） 一切似乎都运行良好，但我的问题是，如果内容足够大，可以水平滚动，则将页脚放在水平滚动条的后面，因此在几页上，我制作了#footer {bottom：16px}或因此要考虑到水平滚动条在那里。 我遇到的问题是显示器分辨率不同。显然，内容将根据窗口大小水平滚动或不滚动。有什么方法可以将页脚保持在底部（或水平滚动条上方）没有问题分辨率或窗口大小是多少？     

解决方法

经过大量的试验和错误，我发现这是始终在底部的页脚的最佳解决方案： 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;

}

    ,

<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%;
}

    ,我看到两种可能性： 第一种选择 强制正文始终显示滚动条。但这可能看起来很奇怪。

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

的滚动条高度加上页脚高度必须为负数。 ѭ9必须具有与顶部填充相同的值，因此顶部的内容不会超出页面。     ,我最好的主意是将广泛的内容作为其自己的可滚动div的一部分。然后，页脚将停留在内容底部的位置，看起来总是居中。 如果您希望滚动条不在页脚上方，则可以对div和一些CSS做一些花哨的操作，例如将一个与页脚大小相同的空div放在较宽的内容下方，并使真正的页脚位于顶部：- （页脚的高度）