80

I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom.

I have put all my pages in a "holder"

#holder {
  min-height: 100%;
  position:relative;
}

And then used the following CSS for my footer

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

The html for my footer

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

I would like to keep the footer fluid.

Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
Richlewis
  • 15,070
  • 37
  • 122
  • 283
  • 1
    well your footer's absolute position is entirely dependant on the container-divs size. So if there isn't any content in the container, it probably ends somewhere around the middle of the page and you footer positions 50px below that. – jakee Jul 19 '12 at 07:56
  • thanks for answer, what would be a solution to get around this? – Richlewis Jul 19 '12 at 08:14
  • Either position your footer outside the container div or force the container to have full height – jakee Jul 19 '12 at 08:24
  • This may be what you are looking for http://stackoverflow.com/q/8824831/681807 – My Head Hurts Jul 19 '12 at 09:16
  • @MyHeadHurts, it is your solution that I am using, bit think i may be having problems now as I have put the footer within a container, row and span 12 – Richlewis Jul 19 '12 at 09:23
  • @Richlewis I think you have missed a few key parts from the solution. I will add an answer for you – My Head Hurts Jul 19 '12 at 09:30

8 Answers8

103

just add the class navbar-fixed-bottom to your footer.

<div class="footer navbar-fixed-bottom">

Update for Bootstrap 4 -

as mentioned by Sara Tibbetts - class is fixed-bottom

<div class="footer fixed-bottom">
Jon
  • 6,437
  • 8
  • 43
  • 63
  • 13
    This created a frozen footer, with content scrolling up beneath it. Am I missing something? Thx. – scharfmn Mar 26 '14 at 18:36
  • It makes the footer stick to bottom of screen, if thats what you mean by frozen. On a small screen it will display the footer even when there is overlapping content. Depends if you want to always show the footer – Jon Mar 26 '14 at 19:01
  • also good to note that if you have JS generated dom `ng-repeat` in angular ... you will need to put `margin-bottom` on the wrapper for the generated elements equal to the height of the sticky footer ... bootstrap puts-margin top on the footer but the margin-top wont apply to generated dom and you will end up with the bottom of you generated dom will under the footer. – Benjamin Conant Jan 07 '16 at 17:21
  • 4
    As of Bootstrap 4, instead of `navbar-fixed-bottom` it is just `fixed-bottom` – Sara Fuerst Oct 29 '19 at 19:15
45

As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807

One of the key parts of this solution is to add height: 100% to html, body so the #footer element has a base height to work from - this is missing from your code:

html,body{
    height: 100%
}

You will also find that you will run into problems with using bottom: -50px as this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50px to the last element before the #footer.

Community
  • 1
  • 1
My Head Hurts
  • 37,315
  • 16
  • 75
  • 117
  • Thanks so much, i thought that the html,body height had been set, seems it wasnt, changed bottom also and voila. Thanks again – Richlewis Jul 19 '12 at 09:52
  • apologies to ask again but i have now noticed when the viewport is decreased to say size of an iphone the footer text is overlapped by the content? any ideas? – Richlewis Jul 19 '12 at 09:56
  • No problem. Are you applying `margin-bottom: 50px` to the last piece of content before the footer? If you are and it isn't working then you may have to increase this for an iPhone (not sure why you would, but it could be the case). You can do this using [CSS media queries](http://css-tricks.com/css-media-queries/) – My Head Hurts Jul 19 '12 at 10:20
  • 1
    I see my mistake, i wasnt applying margin-bottom:50px to the content before footer like you said, set bottom to 0 and now fine, no need for a media query...PHEW!!! – Richlewis Jul 19 '12 at 10:29
  • That is one awesome fix; – Ryu_hayabusa Dec 27 '13 at 06:39
  • i will forever love you @MyHeadHurts – Prefijo Sustantivo Dec 06 '16 at 20:39
  • I have used `div[class^="container"]:last-child` to apply the margin to the last child. – Cozmoz Apr 11 '18 at 16:06
13

Most of the above mentioned solution didn't worked for me. However, below given solution works just fine: 

<div class="fixed-bottom">...</div>

Source

BlackBeard
  • 10,246
  • 7
  • 52
  • 62
9

http://bootstrapfooter.codeplex.com/

This should solve your problem.

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>

CSS:

html,body
{
height:100%;
}

#wrap
{
min-height: 100%;
}

#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}
messivanio
  • 2,263
  • 18
  • 24
easwee
  • 15,757
  • 24
  • 60
  • 83
  • thanks, what is the @renderbody() doing, i have tried this solution before and i actually get @renderbody() outputted as html? – Richlewis Jul 19 '12 at 09:15
  • Ignore that part - it is just a function that calls the body content from other controls. – easwee Jul 19 '12 at 09:18
6

Here is an example using css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

fiddle

Victor
  • 5,043
  • 3
  • 41
  • 55
  • Fantastic use of calc. Sadly still an issue in 2017 with custom sites that use some bootstrap functionality – soulshined Sep 23 '17 at 21:32
6

Use the bootstrap classes to your advantage. navbar-static-bottom leaves it at the bottom.

<div class="navbar-static-bottom" id="footer"></div>
Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50
1

It could be easily achieved with CSS flex. Having HTML markup as follows:

<html>
    <body>
        <div class="container"></div>
        <div class="footer"></div>
    </body>
</html>

Following CSS should be used:

html {
    height: 100%;
}
body {
    min-height: 100%;
   display: flex;
   flex-direction: column;
}
body > .container {
    flex-grow: 1;
}

Here's CodePen to play with: https://codepen.io/webdevchars/pen/GPBqWZ

Damian Czapiewski
  • 843
  • 7
  • 23
0

I have found a simple solution for this. For body tag add <body class="d-flex flex-column min-vh-100">. On footer tag add class

mt-auto

The entire code looks as follows

<html>
<head> </head>
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid"></div>
<footer class="mt-auto"></footer>
</html>

This is working for bootstrap 4+ and tested till 5 beta 1

Phani Shashank
  • 98
  • 1
  • 10