0

How can I force #footer to the bottom of the page even when there's not enough page content to push it to the bottom?

https://www.bootply.com/qMgTsXOMJd

Please leave an example, Thank you very much in advance

Johnny
  • 15
  • 8
  • 1
    https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page – Andrew Kapunin Jan 16 '18 at 22:37
  • 2
    Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) – Martin Jan 16 '18 at 22:42
  • This question has been asked, and answered, many times before, why is your instance different, why have all the other questions on this *exact* topic not solved your issue? – Martin Jan 16 '18 at 22:44
  • Also you don't show an example. At least provide code ***in your question*** if you want people to help with a specific example. – Martin Jan 16 '18 at 22:44
  • Im aware its been asked and answered many times before, the reason I ask is because it does not seem to be working with my code.. – Johnny Jan 16 '18 at 22:47
  • I dont know why its not working with my code, thats why I left a bootply link hoping someone could help me figure out whats going on – Johnny Jan 16 '18 at 22:47
  • Those links look like a duplicate question but they show the old school way of doing it. This questions regards bootstrap which already has a solution for sticky footer which I linked to. – Liam Kenneth Jan 16 '18 at 22:50
  • Hello, the css you provided did not seem to resolve the issue, been trying to fix this issue for hours but haven't figured it out :/ – Johnny Jan 17 '18 at 16:59

2 Answers2

0

Here's an example of how to do a sticky footer on the bootstrap doc website: http://getbootstrap.com/docs/3.3/examples/sticky-footer-navbar/

In the example the footer is positioned absolute, this sticks it to the bottom of the screen and the body has a bottom margin that matches the height of the footer so content does not overflow the footer.

Add something like this to your css:

body {
    margin-bottom: 60px;
}

footer {
    height: 60px;
    position: absolute;
    bottom:0;
}
Liam Kenneth
  • 982
  • 1
  • 11
  • 21
  • Hello, I've tried sticking the footer with this example and couldn't seem to get it working, could you provide an example with the existing code please? – Johnny Jan 16 '18 at 22:40
  • The answer is in the bootstrap link, inspect the footer and body elements and figure out how it works and how to apply it to your code. – Liam Kenneth Jan 16 '18 at 22:46
  • don't copy it directly, so you don't have a footer element but an Id of footer so your css for footer would be `#footer {` instead – Liam Kenneth Jan 16 '18 at 22:48
  • still not having any luck, i know this is a simple code except for some reason it isnt working with my code.. – Johnny Jan 16 '18 at 22:52
0

You have to add a tag: in the navigation and it'll force it to the bottom.

Shana
  • 1