html - 粘性页脚和内容滚动 WP

Question

我们在 http://cmagics.eu/digitalmagazinepublishing 有一个 Wordpress 站点它使用 responsive2 主题。我们正在尝试获得一个看起来工作正常的粘性页眉，但是我们也试图获得一个粘性页脚，它只是粘在页面底部并且像 http://ryanfait.com/sticky-footer/ 中的那样工作。

由于 responsive2 主题有点神秘，我怎么能这样；

1。使用正确的粘性方法而不是 position:fixed 将页脚固定在页面底部

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 查询在不同的分辨率下创建中断，并告诉您的主要内容区域 overflow hidden 。您也可以通过这种方式在主要内容区域内使用 float 的相对布局。