html - 没有 Content Div 的 Wordpress 页面上的 CSS Sticky Footer

Question

我试图让我的页脚向下延伸到页面末尾，以便它粘在底部。

我尝试使用一个教程，其中我使用 css 样式使页脚粘在底部:

    * { margin:0; padding:0; } 

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 175px; }  /* must be same height as the footer */

#footer {
        position: relative;
    margin-top: -175px; /* negative value of footer height */
    height: 175px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

我现在正努力让它工作几个小时，有人可以检查我的问题吗？

My project I'm working on

提前致谢

Answer 1

为了获得粘性页脚效果，您必须对 HTML 和 CSS 进行一些修改，请尝试以下操作:

CSS

html, body {
    height: 100%;
}

#colophon:before, #colophon:after {
    content: "";
    display: table;
    zoom:1; /*ie fix*/
}
#colophon:after {
    clear: both;
}
footer {
    display: block;
}

#page {
    height: auto !important;
    margin: 2em auto -175px;
    max-width: 1000px;
    min-height: 100%;
}

HTML

为了让您的页脚贴在底部，您必须将它与您的 #page 容器分开，如下所示:

<div id="page" class="hfeed">..</div>
<footer id="colophon" role="contentinfo">...</footer>

这应该可以解决问题!