粘滞页脚无法正常工作答案

【问题标题】：Sticky footer not working correctly粘滞页脚无法正常工作
【发布时间】：2013-12-13 18:51:20
【问题描述】：

我试图在我的网站上实现粘性页脚，但由于某种原因它不想工作并且它的推送超出了它的需要。我尝试了很多“粘页脚”教程，但总是有一些东西不起作用。

html, body {
    height: 100%;
}

#content {
    min-height: 100%;
}

#main {
    overflow:auto;
    padding-bottom: 40px;
}

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

【问题讨论】：

标签： html css footer sticky

【解决方案1】：

已更新以允许重叠侧边栏：http://jsfiddle.net/Qx5Fz/12/

您遇到的问题是在侧边栏使用position: fixed; height: 100%;。这会导致侧边栏占窗口的 100%，当页脚应该位于窗口底部时，它总是会将页脚向下推。

我在这里使用粘性页脚：Sticky footer + textarea height in percentage（来源：http://css-tricks.com/snippets/css/sticky-footer/）

您需要将所有内容放在一个 div 中，包括您的标题。然后使用这个 css 让页脚工作。这会考虑到垂直边距，因此您需要将任何边距合并到计算中，或者只使用填充。

html, body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}
#wrap {
    height:100%;
    margin: 0;
}
#wrap {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -100px; 
}
#wrap:after {
    content: "";
    display: block;
}
#footer, #wrap:after {
    /* .push must be the same height as footer */
    height: 100px; 
}

我在侧边栏添加了top: 0。

【讨论】：

但是侧边栏应该是重叠的，我自己不会这样做，但它是这样设计的。
我已经更新了答案，让它仍然重叠，但没有将页脚向下推。
谢谢你，这似乎工作得很好，希望我能够在本地重新创建它。还有一件事，您会注意到，当您向下调整窗口大小时，主文本会切换到左侧并位于侧边栏下方。我知道它的位置是固定的，它应该可以通过将位置更改为静态来修复吧？
Position: static 就像没有设置位置一样。这将把它放在正文之上。如果您希望它位于正文下方，则必须将侧边栏移动到正文之后。我还建议您在更改位置时将高度设置为自动。
是的，上面的文字就可以了，因为它只是用于移动视口。好的，谢谢:)

【解决方案2】：

试试

  #footer { position: fixed; }

而不是相对

【讨论】：

我希望它只是粘在底部，而不是固定的。如果没有其他方法我会使用fixed。

【解决方案3】：

试试这个：http://jsfiddle.net/Qx5Fz/8/

#footer {
    position: fixed;
    height: 40px;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

【讨论】：

我希望它只是粘在底部，而不是固定。如果没有其他方法我会使用fixed。