【问题标题】:Floating footer prpblem浮动页脚问题
【发布时间】:2013-10-23 12:22:17
【问题描述】:

伙计们,

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

在我的 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;
}

/米卡

【问题讨论】:

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


    【解决方案1】:

    内容页上的 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;

    【讨论】:

    • 感谢您的回答 James.Yes,index.html 没问题。我现在才试图让“me.html”代码工作。其他文件仍然有那个“旧”的 .site-foote 类标签..
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-09-30
    • 2018-02-20
    • 2012-05-29
    • 2017-04-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多