CODEWITHSUNDEEP
jquerycss
santa
santa

Reputation: 12512

Position footer at the bottom

I would like to position the footer at the bottom of the page.

For example on the page where there's not much content, I still need the footer at the bottom, but if there's a content longer than the page's height it must push the footer down.

Can it be done with CSS only or do I need to add some jQuery magic?

enter image description here

Upvotes: 3

Views: 1479

Answers (6)

Daryl Aranha
Daryl Aranha

Reputation: 106

This can be done using only CSS.

Here is the main part of a HTML file which contains nav, main and footer.

...
<nav class="nav"> ... </nav>
<main class="main"> ... </main>
<footer class="footer"> ... </footer>
...

In your CSS add the following lines

...
.main {
    ...
    min-height: calc(100vh - <height of your footer>)
}
...

Now, if there is no content within main the min-height will make sure to make the main take the whole viewport and if there are any contents in the main, the min-height does not matter.

Upvotes: 0

kornieff
kornieff

Reputation: 2557

All previous CSS solutions requite footer height to be constant. For all proper browsers, the following solution solves the problem for dynamically changing footer height.

html { height: 100%; }

body {
    margin        : 0;
    min-height    : 100%;
    display       : flex;
    flex-direction: column;
}

body > .content { flex-grow:   1; background: ghostwhite; }
body >  footer  { flex-shrink: 1; background: gold; }
<div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis luctus mauris nec lacinia. Maecenas egestas, nisl sed volutpat consectetur, urna orci bibendum lorem, sit amet maximus dolor massa et mi. Duis elit neque, interdum nec euismod sed, interdum ac dui. Maecenas non ornare nibh. Vestibulum malesuada et sem quis mattis. Phasellus a justo non dolor porta faucibus sed id lectus. Nullam imperdiet, velit eu convallis ornare, ipsum augue vestibulum lectus, finibus bibendum nulla libero a augue. Aenean eleifend sapien eu placerat facilisis. Vestibulum pulvinar pretium neque, in ullamcorper orci semper nec. Donec rhoncus velit magna, eget dapibus augue cursus quis. Proin in nisi ut tortor finibus tristique vitae vel libero. Aliquam placerat diam nec consectetur tristique. Praesent bibendum diam id velit pellentesque facilisis. In quis odio nec tortor cursus commodo in eu nisl. Nullam non interdum enim, a faucibus metus. Mauris posuere erat id vestibulum eleifend.  </div>
<footer> {{ footer }} </footer>

Upvotes: 1

Dejo Dekic
Dejo Dekic

Reputation: 2126

Make a another div above your footer like this and add clear both to it and it will push your footer:

<style type="text/css">
.push{
clear:both;
height:5px;
width:5px;
display:block;
position:relative;
margin:0 auto;
}
</style>

  //HTML CODE
  <div class="push"></div>     
  <div class="fotter">
  </div>

Upvotes: 0

matsko
matsko

Reputation: 22223

This can be done using CSS.

1) setup a footer in your HTML

<body>
  ...
  <div id="footer">...</div>
</body>

2) Use CSS positioning to place it at the bottom.

html {
  padding-bottom:50px;
  position:relative;
}

body {
  position:relative;
  min-height:100%;
}

#footer {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:50px;
}

Upvotes: 1

Endre Simo
Endre Simo

Reputation: 11541

Apply the technique described in this post: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page.

I found myself facing the same situation, and i think this is the most comprehensively described method for using sticky footer.

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47687

You should use one of the sticky footer techniques

Upvotes: 1

Related Questions