Can´t stick my footer to the bottom [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I´m doing a test website and I´m trying to stick properly the footer at the bottom of the website but I can´t do it.

The footer is at the bottom but it doesn´t go down with the content of the website. For example, if you click on "Express Request Form" button, you can check what happens.

I appreciate a lot if anyone can help me, please.

You can check the website in link below:

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

Thanks in advance.

Answer 1

After your main-wrapper-block ends, put a div <div style="clear:both"></div>

This happen because when you float child elements, they does not behave like normal block elements, thus parent did not get proper height. Whenewer you use float use clear:both to prevent this problem. You page got previous height cause you have given min-height to divs.

Answer 2

Use a clearfix or give your footer a clear: both should solve your problems, because you use floats.

Answer 3

I've used this in the past and it does exactly what you are trying to do. http://ryanfait.com/sticky-footer/

Very easy to implement as well. If this doesn't suit your needs, let me know and I will find something that will. :)

Here is how to implement it.

Answer 4

You have mistake in layout:

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 */
}

Compare your code and my example and so changes

Answer 5

Use this trick, it works for such dynamic height changes in page: 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 demo: http://jsfiddle.net/maysamsh/ag5Rx/1/

You can find original article here.