Question

我正在做一个测试网站，我试图在网站底部正确地粘贴页脚，但我无法做到。

页脚位于底部，但不会随网站内容而下降。例如，如果您单击“快速申请表”按钮，则可以检查会发生什么。

如果有人能帮助我，我会非常感激。

您可以在以下链接中查看网站：

http://www.flexacademy.co/test/

提前致谢。

Answer 1

使用clearfix或给你的页脚clear: both解决问题，因为你使用了浮点数。

Answer 2

我过去曾经使用过它，它完全符合您的要求。 http://ryanfait.com/sticky-footer/

也很容易实现。如果这不符合您的需求，请告诉我，我会找到一些能够满足您需求的东西。：）

Here is how to implement it.

Answer 3

在main-wrapper-block结束后，请设置div <div style="clear:both"></div>

这是因为当您float子元素时，它们的行为不像普通的块元素，因此父级没有达到适当的高度。 Whenewer使用float使用clear:both来防止此问题。你的页面得到了前一个高度，因为你给了div的最小高度。

Answer 4

布局错误：

<强> HTML

<div id="wrapper">
    <div class="wrapper-2">
        <p>header and content of the page</p>
    </div>
</div>
<div id="footer">footer content</div>

<强> CSS

html,
body{
    height:100%;
    margin:0;
}
#wrapper{min-height:100%;}
.wrapper-2 {
    padding-bottom:70px; /* footer height + distance between footer and content */
}
#footer{
    position:relative;
    width:100%;
    height:50px;
    margin-top:-50px; /* footer height */
}

比较您的代码和我的示例，然后进行更改

Answer 5

使用此技巧，它适用于页面中的此类动态高度更改： HTML：

<div id="footer">foo</div>

jQuery的：

$(window).bind("load resize", function () {
    positionFooter();
});

function positionFooter() {

    var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
    if (docHeight < $(window).height()) {
        var diff = $(window).height() - docHeight;
        if (!$("#sticky-footer-push").length > 0) {
            $("#footer").before('<div id="sticky-footer-push"></div>');
        }
        $("#sticky-footer-push").height(diff);

    }
}
positionFooter();

JSFiddle演示：http://jsfiddle.net/maysamsh/ag5Rx/1/

您可以找到原始文章here。

不能将我的页脚粘到底部

5 个答案: