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

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

请检查我的小提琴:http://jsfiddle.net/Qx5Fz/1/

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。
    猜你喜欢
    • 2012-01-16
    • 1970-01-01
    • 1970-01-01
    • 2012-06-06
    • 2012-09-04
    • 2013-11-06
    • 2018-07-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多