How to make a footer that sticks to bottom when content is short but not fixed in CSS?

Question

How to make a footer that sticks to the bottom when content is shorter than screen height and float to bottom of the content when content is longer than screen height ?Now I am doing like this.

html

<body>
<div class='container'>

</div>
<footer>

</footer>
</body>

CSS

.container{
  position:relative;
  min-height:500px;
}

footer{
 height:200px;
 background-color:black;
 position:absolute;
 bottom:0px;
}

This code is fine when the content is shorter than the screen size or very short. But my issue is when the content is very much longer(eg.twice of the screen size), footer sticks to the bottom when it first loads the page. But when I scroll down, the footer is stacked to the top of the new scrolled content.

He wants it to be at the bottom of the document when it extends beyond the viewport, but at the bottom of the viewport otherwise. — PitaJ, Nov 17 '15 at 05:27
For more info on sticky footers: http://stackoverflow.com/questions/18469262/position-footer-at-bottom-of-page-having-fixed-header — Hashem Qolami, Nov 17 '15 at 05:36

score 1 · Answer 1 · answered Nov 17 '15 at 05:13

1

$(document).ready(function(){
    var containerHeight = $('.container').outerHeight(true);
    var windowHeight = $('window').height();
    if(containerHeight < windowHeight ){
       $('footer').css('position','fixed');
    }
});

answered Nov 17 '15 at 05:13

Mohamed-Yousef

23,946
3
19
28

This is how to do it with jQuery, but it should be done with CSS. – PitaJ Nov 17 '15 at 05:16
Would this work if there are images in the document or would you need to use `$(window).load()` ? – dramzy Nov 17 '15 at 05:18
@PitaJ yes .. as I can see Jquery tagged .. So this is a jquery solution :) – Mohamed-Yousef Nov 17 '15 at 05:19
@RespectMyAuthoritah wait for demo please – Mohamed-Yousef Nov 17 '15 at 05:19
I actually don't think this *is* a solution to his problem. – PitaJ Nov 17 '15 at 05:24
@RespectMyAuthoritah http://jsfiddle.net/mohamedyousef1980/htj8jLr7/ .. Is that what you looking for?? – Mohamed-Yousef Nov 17 '15 at 05:28

score 1 · Answer 2 · answered Nov 17 '15 at 05:14

Please follow the structure to get the result.

<div class="container">
        <div class="page-header">page-header</div>
        <div class="page-content">page-content 
  <br/>
      <div id="more-cont"></div>
      <input type ="button"value="Add More Content" id="add-more">
  </div>
        <div class="footer">footer</div>
    </div>

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
.container {
    min-height:100%;
    position:relative;
}
.page-header {
    background:#ededed;
    padding:10px;
  background-color:green;
  color:white;
}
.page-content {
    padding-bottom:100px; /* Height of the footer element */
}
.footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

Please see the demo

score 0 · Answer 3 · answered Nov 17 '15 at 05:18

0

Demo

css code:

 #footer {
     position: fixed;
     width: 100%;
     clear: both;
     bottom: 0;
     padding: 0;
     margin: 0;
     height: 30px; 
     background: #333;
}

answered Nov 17 '15 at 05:18

Apb

979
1
8
25

I do not want fixed. When it is fixed,if I get very long content,it is still fixed at the bottom of the screen. Not at the bottom of the content. – Wai Yan Hein Nov 17 '15 at 05:26

PitaJ · Answer 4 · 2015-11-17T05:31:58.387

You can easily do this by adding a min-height and padding to body and setting the footer as absolutely positioned relative to it.

Here's a JSfiddle or you can use the Run code snippet button to view the result.

body {
    min-height: 100%;
    padding-bottom: 200px;
    position: relative;
}
footer {
    position: absolute;
    bottom: 0;
    height: 200px;
    left: 0;
    right: 0;
}

/* just for demo */

.container {
    height: 1000px;
    border: 1px solid green;
}

footer {
    border: 1px solid blue;
}

<body>
<div class='container'>
  container stuff
</div>
<footer>
  footer stuff
</footer>
</body>

How to make a footer that sticks to bottom when content is short but not fixed in CSS?

4 Answers4