CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfootertwitter-bootstrap-2
Jane
Jane

Reputation: 816

Bootstrap sticky footer not sticking

I have some problems with my footer in a free bootstrap template. I tried multiple solutions other people gave already but without result.

The code seems to be too long to post here so I uploaded the html file and assets to my server here; http://kellyvuijst.nl/about.html

As you can see in my css I tried setting 100% height for the body, then making a wrapper div and a push div. It does push the footer somewhat down but not all the way to the end of the screen. For some reason it doesn't seem to pick up the 100% height on the body I think?

The method above obviously works here; http://getbootstrap.com/2.3.2/examples/sticky-footer.html but doesn't seem to work on my template, why is that?

Upvotes: 3

Views: 5607

Answers (4)

Shawn Erquhart
Shawn Erquhart

Reputation: 1858

Your footer is inside your wrapper, and you haven't applied any of the necessary styles to the wrapper. If you're following Bootstrap's sticky footer template, you probably didn't notice that all css pertinent to the sticky footer is contained in an inline style block in the header. You also did not close the .wrapper div, and the code below the opening tag for that div isn't indented, which is probably why you forgot to close it.

I made a codepen of your site with the proper classes added to the top of the css stylesheet (not inline): check it out.

I gave the html element a static height of 600px just to show that the footer goes to the bottom, you can remove this for your actual code.

Upvotes: 2

Tushar
Tushar

Reputation: 4418

Do following changes in you CSS. .footer class has absolute position for sticking the footer at the bottom of the screen. 

html, body {
min-height: 100%; /* you Already have this */
height: 100%; /* Add this */
 }
/* No need of */
.wrapper {
    height: auto !important;
    height: 100%;
}
/* Add this css */
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

Upvotes: 3

Lewis Wrightson
Lewis Wrightson

Reputation: 9

The layout of the HTML is outlined here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

The footer needs to be out of the wrapper div tag.

Upvotes: 0

Hive7
Hive7

Reputation: 3675

Add this to your css:

body, html {
    height: 100%;
}

Then remove the footer from the wrapper and put it after the wrapper

Finally you need to change the margin on the wrapper to:

.wrapper {
    margin: 0 auto -110px;
}

Upvotes: 0

Related Questions