Question

我们在http://cmagics.eu/digitalmagazinepublishing有一个使用responsive2主题的Wordpress网站。我们正试图获得一个似乎工作正常的粘性标题，但是我们也试图获得一个粘性页脚，它只是粘在页面底部并且像http://ryanfait.com/sticky-footer/

那样工作

由于response2主题略显神秘，我怎么能;

1 即可。使用正确的粘贴方法将页脚停留在页面底部而不是位置：固定

2 即可。当页面上有足够的空间时，停止不必要地滚动主内容？

html来源：

视图源：http://cmagics.eu/digitalmagazinepublishing/

CSS

#footer {
    position: relative;
    clear:both;
    font-size: 11px;
    line-height: 1.5em;
    background: rgb(54, 53, 53);
    color: #fff;
    border-top: 2px solid #444;
    text-align:center;
    margin-top: -324px; **just a hack to make the footer appear at the bottom incorrectly**
    margin-bottom: -25px;
    height: 162px;
    font-family: Roboto Regular;
}

#site-container {
    width: 900px;
    margin: 130px auto 0 auto;
    overflow:auto;
    padding-bottom:162px;

}

.hfeed {
min-height:100%;
    height:100%;
    height: auto;

}

Answer 1

Here's a solution that I think is very clean。对所有主要内容元素（页眉，文章，页脚）使用绝对定位。如果需要针对不同的屏幕宽度（响应式设计）更改页眉或页脚高度，请使用@media查询创建不同分辨率的中断，并告诉主要内容区域隐藏溢出。您也可以通过这种方式在主要内容区域中使用浮动的相对布局。

Answer 2

这是页脚css： -

#footer {
         position: fixed;
         font-size: 11px;
         line-height: 1.5em;
         background: rgb(54, 53, 53);
         color: #fff;
         border-top: 2px solid #444;
         text-align: center;
         margin-top: -324px;
         margin-bottom: -25px;
         height: 162px;
         font-family: Roboto Regular;
         bottom: 0;
        width: 100%;
      }

粘性页脚和内容滚动WP

2 个答案: