HTML CSS - 粘性页脚

Question

我尝试了许多不同的“粘性页脚”技术，但出于某种原因，我无法在我的网站上使用它： http ： //codeandco.net/services/

有任何想法吗？

注意：这与固定页脚不同。 我试图让页脚“粘住”到窗口的底部，但是在任何页面内容下面 - 就像这样： http ： //getbootstrap.com/examples/sticky-footer/

Answer 1

将这4行添加到CSS中的#footer中

position: fixed;
bottom: 0;
left: 0;
right: 0;

Answer 2

以下代码有效。
注意：'footer-push'是让它工作的关键：

html, body {
    height: 100% !important;
}
.wrapper {
    min-height: 100% !important;
    margin: 0 auto -75px !important; /* the bottom margin is the negative value of the footer's height */
}

footer, .footer-push {
    height: 75px !important; /* '.push' must be the same height as 'footer' */
    position: relative !important;
}

一些参考文献来自： http ： //ryanfait.com/html5-sticky-footer/

Answer 3

这是方法：使用这个例子 。

#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}

别忘了这个：

body {
margin-bottom: 60px;
}

html {
position: relative;
min-height: 100%;
}

Answer 4

如果您需要页脚是固定的 ，改变页脚风格这一点：

#footer {
background: #CCC;
color: #787878;
font-size: 13px;
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
}

但是不要忘记为身体添加填充：

body {
padding-bottom: 60px !important;
}

...要么

main {
margin-bottom: 60px;
}

Answer 5

#footer
{   
    width:100%;
    bottom: 0;
    height: 20px;
    float:left;
}