粘性页脚和内容滚动WP

Question

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

由于响应式2主题的略显神秘的性质，我怎么能;

1.使用正确的粘性方法将页脚卡在页面底部 位置：固定

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

网页来源：

查看来源：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

这是一个我认为非常干净的解决方案。 对所有主要内容元素（页眉、文章、页脚）使用绝对定位。 如果需要更改不同屏幕宽度的页眉或页脚高度（响应式设计），请使用@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%;
      }