How to align a footer element always at the bottom of the page?

Question

I have a page on which there’s a div with various contents inside, which are modified according to the user’s wish. Below there is another div who is the Footer.

In case I put one position: relative, the footer will adjust its position according to the size of the page, but it does not get "stuck" at the bottom (with no space at the bottom of the page) when the browser window is resized to a smaller size.

Already if I put one position: absolute, the footer will stay fixed at the bottom of the page, but will not fit the window size.

But I’d like to fix one bottom: 0px, similar to what happens if I apply a position: absolute, but so that if the page content is larger, the footer does not overlap the page.

Does anyone know how it would be possible to do that?

My example is here at Jsfiddle.

Answer 1

Solution with FLEXBOX and VH

I made a jsfiddle with the perfect solution to your problem with only 4 css properties in your application container using flexbox and vh as a relative unit, understand better with the code below:

<section class="container">
  <main></main>
  <div class="footer"></div>
</section>

.container{
  height: 100vh;
  display: flex;
  flex-direction: column:
  justify-content: space-between;
}

This ensures that the .container always has the exact height of the viewport and that the <main></main> be always at the beginning of .container and the .footer is always at the end, and when the content within the <main></main> beyond the dimensions of viweport, the .footer follow the content without overlapping.

See more here on this JSFIDDLE

And in this link a guide about FLEXBOX

Answer 2

Keep the footer always at the bottom, when the content is smaller than the page, and so that it adjusts its position as the content gets larger, can be done using an element div as wrapper of the content.

Example HTML structure:

<div class="main">
    <div class="content">
        Conteúdo aqui
    </div>

    <div id="footer">
        <span>Footer</span> 
    </div>
</div>

And the following CSS:

* { margin:0; padding:0; }
html, body {height:100%;}
.main {
    min-height:100%; 
    position:relative; 
    width:1200px;
    margin: 0 auto;
}
.content{   
    width: 100%;
    background: #cccccc;   
}
#footer{    
    background: #3C948B;
    position:absolute;
    bottom:0; 
    width:100%;
    margin-top: 10px;
}

Example in Jsfiddle

^{Note: credits to my co-worker Marcos Souza, who accepted the challenge.}

Answer 3

Solution in jquery where there is no need to change parameters in other div or body, only in the div where the footer will be. I use jquery to calculate browser width, position and footer width, so knowing how much to add margin-top to div footer.

function footer_botom() {
var footer_position = $('#footer').offset().top;
var footer_height = $('#footer').height();
var tela_height = $(window).height();
var margin = tela_height-footer_position-footer_height;
$('#footer').css({"margin-top": margin+'px'});}

footer_botom();
$(window).resize(function() {
$('#footer').css({"margin-top": '0px'});
footer_botom();});

#footer {background-color:#ccc; width:100%}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="content">
        Conteúdo aqui
    </div>

    <div id="footer">
        <span>Footer</span> 
    </div>
</div>

Answer 4

At a glance : Jsfiddle

I went to position : fixed and z-index : 10

The menu remains next to the bottom 0px, now just adjust the margin.

Answer 5

Try to put a minimum height on the content above the footer.

Example:

min-height: 100px