8

I am attempting to enforce that my footer goes at the bottom of my website. I do not want it to stick when I scroll, just to appear at the bottom when scrolling down the webpage.

Currently - the webpage displays with the footer sitting beneath the content. I have added such code as bottom:0; and found that it sticks and does not suit my website. I have also added such code as html, body { height:100%;} as viewed on other stackoverflow questions - but have had no joy.

Any advice would be appreciated.

Code: 

    .footer {
     background: #F37A1D;
        position : absolute;
     width: 100%;
     border-top: 3px solid #F37A1D;
    }
    <div class="footer">
    <div class="container">
            <p>&copy; COMPAY 2015</p>
        </div>
    </div>
Saagar Elias Jacky
  • 2,684
  • 2
  • 14
  • 28
user289040
  • 409
  • 2
  • 6
  • 16
  • Isn't displaying beneath the content what you want? – zpr May 12 '15 at 18:09
  • I'm guessing you want a sticky footer? It is not built into bootstrap, but you can make your own pretty easy. https://css-tricks.com/snippets/css/sticky-footer/ – cwahlfeldt May 12 '15 at 18:11
  • 1
    maybe so? http://jsfiddle.net/0q1r009L/ – Dmitriy May 12 '15 at 18:13
  • To be clear - it is displaying beneath my content. but it is not sitting at the bottom of the browser window. It sits just beneath my content. – user289040 May 12 '15 at 18:13
  • @dmitriy - when i add such css settings you have shown here - if my content goes further than my screen size - the footer sits between my content. – user289040 May 12 '15 at 18:15
  • thank you @Dmitry - I have implemented your code and this has resolved my problem - if you can post this answer? – user289040 May 12 '15 at 18:19
  • @user289040 I made answer, and I'm glad I could help – Dmitriy May 12 '15 at 18:37

4 Answers4

9

*{
    padding: 0;
    margin: 0;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background: #F37A1D;
 border-top: 3px solid #F37A1D;   
}
<div class="footer">
    <div class="container">
            <p>&copy; COMPAY 2015</p>
        </div>
    </div>
Dmitriy
  • 4,475
  • 3
  • 29
  • 37
4

You can just add navbar-fixed-bottom class to the footer.

<footer class="navbar-fixed-bottom">
    <p>Footer content</p>
</footer>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="jumbotron">
    <h1>Twitter Bootstrap 3.0</h1>
  </div>

  <footer class="navbar-fixed-bottom">
    <p>Footer content</p>
  </footer>

</div>

You may also want to refer to Bootstrap sticky footer CSS.

rageit
  • 3,513
  • 1
  • 26
  • 38
0

This example seems to be working.

http://getbootstrap.com/examples/sticky-footer-navbar/

Also, here is a sticky footer using a little jQuery

http://codepen.io/imohkay/pen/htpzf

.footer {
        background-color: #f5f5f5;
        bottom: 0;
        height: 60px; 
}
Denny Smith
  • 113
  • 1
  • 10
0

If you set a min-height on your content div, then the footer will always be pushed to the bottom, regardless if there is enough content to push it down on its own.

zpr
  • 2,886
  • 1
  • 18
  • 21