Question

我试图在我的网站上实现粘性页脚，但出于某种原因，它不想工作，它的推动力超过了它的需要。我尝试了许多“粘性页脚”教程，但总有一些不起作用。

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;
}

Answer 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。

Answer 2

试

  #footer { position: fixed; }

而不是相对

Answer 3

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

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

粘性页脚无法正常工作

3 个答案: