浮动页脚问题

时间:2013-10-15 15:49:33

标签: css responsive-design footer sticky-footer floating

人,

我正在构建这个响应式网站,我在底部浮动页脚。

在我的index.page(http://testi3.aada.fi/)上,我的代码工作正常,但我的内容页面()出现问题,即使我对浮动页脚使用相同的代码..

有人可以给我一个提示如何解决这个问题吗?

我的浮码:

.container {
min-height: 100%;
/* equal to footer height */
margin-bottom: -120px; 
}

.container:after {
content: "";
display: block;
}

.site-footer, .container:after {
/* .push must be the same height as footer */
height: 120px;
text-align: center;

}

.site-footer {
background-image: url(../images/footer_bg_trans.png);
background-repeat: no-repeat;
background-position: center top;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}

/ Mika

1 个答案:

答案 0 :(得分:0)

您的内容网页上的CSS与索引页面上的CSS不同。索引页面上.site-footer的CSS是:

.site-footer {
background-image: url("../images/footer_bg_trans.png");
background-position: center top;
background-repeat: no-repeat;
bottom: 0;
position: fixed;
text-align: center;
width: 100%;
}

在内容页面上的位置:

.site-footer {
background-image: url("../images/content_footer_bg.png");
background-position: center top;
background-repeat: no-repeat;
margin-top: 10px;
text-align: center;
}

你缺少宽度:100%;位置:固定;底部:0;