Set footer on the bottom ,but not allways on bottom

Question

I have to set the footer on the bottom but in the way I'm using it's always at the bottom even if the page content is bigger than the screen.

If the content its bigger than the screen I would like to have to scroll in order to see the footer.

  .fijo{
        bottom: 0;
        position: fixed;
        width:100%;
    }

repeat of http://stackoverflow.com/questions/25671073/footer-below-content-but-not-floating-mid-air-if-not-enough-content — Andrew Bone, Dec 30 '15 at 12:29
Check from jquery height of Content and then set css of Footer. — Manwal, Dec 30 '15 at 12:31

score 2 · Answer 1 · answered Dec 30 '15 at 12:46

You need to use a sticky footer.

HTML

<footer class="footer">
    <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
    </div>
</footer>

CSS

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-color: #f5f5f5;
}

score 1 · Answer 2 · answered Dec 30 '15 at 12:39

1

Easy one, just use the following CSS code

 #footer {
 position: absolute;
 bottom: 10;
 left: 0;
 }

The ID of the footer should of course be "footer" in order for this to work, or rename it to whatever you like. Hope this helps :)

answered Dec 30 '15 at 12:39

Cyber Shadow

100
1
11

`bottom: 10` isn't valid - only `0` can be without an measurement unit. – Vucko Dec 30 '15 at 12:59
@Vucko well this is working fine in my site... – Cyber Shadow Dec 30 '15 at 13:51
[Check the example](https://jsfiddle.net/73g4xnk1/) – Vucko Dec 30 '15 at 14:03

score 0 · Answer 3 · answered Dec 30 '15 at 12:47

Here is the solution

Demo

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ffff00;
    padding:20px;
  text-align:center;
}
#content {
    padding-bottom:50px; /* Height of the footer element */
    text-align:center;
}
#footer {
    background:#00ffff;
    width:100%;
    height:50px;
    position:absolute;
    bottom:0;
    left:0;
  text-align:center;
}

HTML:

<div id="wrapper">      
        <div id="header">Header is here</div>       
        <div id="content">Content is here</div>     
        <div id="footer">Footer is here</div>       
</div>

score 0 · Answer 4 · answered Dec 30 '15 at 12:50

If you are using HTML5 in combination with Twitter Bootstrap or any other template, or even pages built from scratch, you can also apply it directly on the footer element with no additional ID or class selectors required using the code @pzp provided above:

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}

Set footer on the bottom ,but not allways on bottom

4 Answers4