粘贴页脚答案

【问题标题】：Sticking footer粘贴页脚
【发布时间】：2012-04-11 03:52:13
【问题描述】：

我试图让我的页脚停留在该网站的页面底部：https://account.radonsystems.net。

不幸的是，它似乎无法正常工作，尽管它在我使用过的其他任何地方都可以正常工作。

这是粘性的 CSS：

html, body {height: 100%;}

#wrap {min-height: 100%;}

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

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

/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}    

.footer a,.footer a:hover{text-decoration:underline;color:#FFF;}

有没有人知道为什么它不粘在底部？

【问题讨论】：

标签： html css sticky-footer

【解决方案1】：

我可以告诉你一个更好的选择来在底部修复它

只需将样式应用为

#footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:57px;
}

感谢和问候，

Wazzy

【讨论】：

如果我没记错的话，你的 CSS 会隐藏页脚，因为它会在底部 = 0 开始绘制它。相反，应该有：bottom:HEIGHT_OF_FOOTER;.
@Naor 这不是“底部”的工作方式。指定 'bottom:0' 表示元素的 bottom 与视口的底部对齐，就像指定 'right:0' 表示元素的右边缘与右对齐视口的边缘。你描述如果有人指定'top:100%'会发生什么。
我相信 'width:100%' 部分是多余的，因为你已经说过 'left:0;对：0；'但没有造成任何伤害！

【解决方案2】：

如果它在其他任何地方都可以正常工作，那么该 html 页面一定有问题，而不是 CSS，可能会发布 HTML 页面代码，或者将其与实际正常工作的代码进行比较。

【讨论】：

【解决方案3】：

查看此链接中的sticky footer tutorial，了解粘性页脚概念的工作原理。这应该可以帮助您比较您的 html 结构和 css 以找到问题。如果你能给我们你的html，我们可以和你一起看。

【讨论】：