0

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

由于 responsive2 主题略显神秘，我该怎么办？

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;

}
4

2 回答 2

1

这是我认为非常干净的解决方案。对所有主要内容元素（页眉、文章、页脚）使用绝对定位。如果您需要针对不同的屏幕宽度（响应式设计）更改页眉或页脚高度，请使用 @media 查询以不同的分辨率创建中断，并告诉您的主要内容区域隐藏溢出。您也可以通过这种方式在主要内容区域内使用浮动的相对布局。

于 2013-12-01T21:42:24.530 回答
0

这是页脚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%;
      }
于 2013-01-30T07:10:44.940 回答