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

Question

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

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (-1 votes)
#5 by (-3 votes)

6

I have a page where there is a div with multiple contents inside, which change according to the user's desire. Below is another div which is the Footer.

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

Now if I put a position: absolute , the footer will be fixed at the bottom of the page, but will not fit the window size.

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

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

My example is here in JsFiddle .

html html5 css

asked by anonymous 31.08.2014 / 23:44

5 answers

Google Chrome sandbox Run shellscript on a mobile android [closed]

score 3 · Answer 1

Solution with FLEXBOX and VH

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

<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 .container always has the exact height of the viewport and that <main></main> is always at the beginning of .container and .footer is always at the end, and when content within <main></main> exceed the dimensions of the viweport, .footer follow the content without overlapping.

See more here at JSFIDDLE

And here's a guide to FLEXBOX

score 1 · Answer 2

Keep the footer always in the base, when the content is smaller than the page, and so adjust its position as the content gets larger, can be done using a div element like wrapper of the content.

Sample 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;
}

Jsfiddle Example

Note: credits to my colleague Marcos Souza, who accepted the challenge.

score 0 · 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 width of footer, thus 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><divclass="main">
    <div class="content">
        Conteúdo aqui
    </div>

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

score -1 · Answer 4

-1

Take a look: Jsfiddle

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

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

23.09.2014 / 17:58

score -3 · Answer 5

-3

Try to put a minimum height in content above footer .

Example:

min-height: 100px

23.09.2014 / 16:29