html - 带有溢出滚动条的 CSS 页脚

Question

我想展示这一点的最简单方法就是提供一个指向需要添加它的网站的链接。

我需要一个简单的页脚，它总是卡在页面底部，无论在主CONTENT和SIDEBAR div 中放置了多少内容。

我尝试过使用粘性页脚和其他一些方法。比如把它放在页面底部，底部为 0，等等。但是，用我的设置它似乎永远不会工作。如果您需要更多信息，请随时询问。

Answer 1

将您网站的 css 更改为这个...这可能对您有帮助...

#Wrapper {
    color: #FFFFFF;
    min-height: 100%;
    overflow: auto;
    width: 100%;
    z-index: 6;
}
#Banner {
    height: 169px;
    position: relative;
    top: 0;
    width: 100%;
}
#Navbar {
    background-color: #666666;
    color: #FFFFFF;
    float: left;
    height: 35px;
    position: relative;
    width: 100%;
}
#Outer {
    float: left;
    height: auto;
    margin-top: 35px;
    width: 100%;
    z-index: 2;
}
#Sidebar {
    background-color: #00FF00;
    float: left;
    margin-left: 10px;
    min-height: 600px;
    width: 12.5%;
}
#Content {
    background-color: #00FF00;
    float: right;
    margin-right: 10px;
    min-height: 65%;
    width: 85%;
}
#Copyright {
    background-color: #FF3333;
    float: left;
    height: 35px;
    width: 100%;
    z-index: 20;
}

Answer 2

好的，你想要的是一个看起来或多或少像这样的 CSS 类。

编辑

.MyBottomBasicClass {
     position: relative;
     bottom 0;
     margin: 0 auto;
     padding: 0;
     Width: 100%;
     height : 300px // or whatever... 
     overflow-x: hidden;
     overflow: scroll; 
 }

编辑

您还需要包装其他内容。

.wrapper{
    min-height: 100%;
 }

和...

html, body {height: 100%;}

现在在你的 html...

<div cssClass="wrapper">
         //       your site content
</div>
<div cssClass="MyBottomBasicClass">
         // here you enter all the information you may need to include copyright  information
</div>