Can't stick footer to bottom. CSS

Question

I've tried everything to get my fotter stick to the bottom of the page, but I keep having this blank space below it.

Here is my html structure:

<html>
  <body>
    <div id="wrapper">
      <header>
      </header>
      <div id="main">
      </div>
    </div>
    <footer>
    </footer>
  </body>
</html>

The css:

#wrapper {
margin:0 auto;
width:1350px;
background-color:#fff;}

#main {
margin:0 auto;
width:1200px;
position:relative;}

footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:absolute;
bottom:0px;
left:0px;}

Things I've tried so far:

Footer inside wrapper, wrapper with position:relative, footer with position:absolute; bottom:0px. Not working, footer appears in the middle of the main content.
Footer inside body. Same as above.
Footer outside wrapper.
Pusher
Margins and paddings for #main with same height as footer.
Pretty much everything I've researched so far.

¿Any help plesase?

Thank you in advance.

PS: Sorry for my english, I'm not a native english speaker.

SOLVED: Forgotten div inside the footer with position:relative bottom:10px that made the whole footer moove a bit upwards creating this blank space below it.

Do you want it to be always-visible at the bottom? That would be [Jordumus' answer](http://stackoverflow.com/a/29165736/1080564). Do you want it to be at the bottom of the page, but only visible when you have scrolled down to it? That's a different solution (**edit:** like [SW4's](http://stackoverflow.com/a/29165747/1080564)). — Niels Abildgaard, Mar 20 '15 at 11:44
possible duplicate of [CSS Single-column layout centered fixed-width 100% height w header and footer](http://stackoverflow.com/questions/23651942/css-single-column-layout-centered-fixed-width-100-height-w-header-and-footer) — Pete, Mar 20 '15 at 11:45

score 2 · Answer 1 · answered Mar 20 '15 at 11:43

You need to set the dimensions of your body to fill the viewport html, then, your absolute positioning will work:

html{
    width:100vw,
    height:100vh;
    margin:0;
}

Alternatively as noted in the other answer - you can set position:fixed, although this will have different behavior in terms of how the element appears in relation to your other content.

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
}
footer {
  height: 20px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: blue;
}

<footer></footer>

score 0 · Answer 2 · answered Mar 20 '15 at 11:42

0

What you want is "position: fixed;" and not "absolute".

footer {
clear:both;
background-color:#484545;
height:120px;
width:100%;
position:fixed;
margin-bottom: 0px;
bottom:0px;
left:0px;}

answered Mar 20 '15 at 11:42

Jordumus

2,763
2
21
38

Now, I'm trying to put a border to my div #main and it is not working. Could it be a problem with that? – Alex B. Forlackofabettername Mar 20 '15 at 12:18
Ok, so my wrapper is not getting bigger according to the content of the website :| – Alex B. Forlackofabettername Mar 20 '15 at 12:22

score 0 · Answer 3 · answered Mar 20 '15 at 11:48

0

You code is working. I have created a jsfiddle with your code and is working fine. https://jsfiddle.net/jithinnjose/270oa889/

#wrapper {
  margin: 0 auto;
  width: 1350px;
  background-color: #fff;
}
#main {
  margin: 0 auto;
  width: 1200px;
  position: relative;
}
footer {
  clear: both;
  background-color: #484545;
  height: 120px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

<div id="wrapper">
  <header>
  </header>
  <div id="main">
  </div>
</div>
<footer>
</footer>

answered Mar 20 '15 at 11:48

JitHiN N JOsE

509
4
11

WOW, thank you all guys, I'm trying all the responses. I'll let you know. I don't want to use position:fixed though. – Alex B. Forlackofabettername Mar 20 '15 at 11:56
footer tag will always be at the bottom. Can you please create a fiddle with ur code so that we can have a look. Do you have any other css applied to your html? – JitHiN N JOsE Mar 20 '15 at 12:15

score 0 · Answer 4 · answered Mar 20 '15 at 12:00

0

Try

position:fixed;

for footer or make a separate div for footer and assign the above mentioned css to that div

answered Mar 20 '15 at 12:00

Sal Bukhari

26
4

score 0 · Answer 5 · answered Mar 20 '15 at 12:05

Try this magic with flexbox.

JSBIN

HTML

<div class="container">
<header role="banner"></header>
<main role="main">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>

CSS

html, body {
  height: 100%;
  min-height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-direction:column;
}
.container {
  overflow-y: scroll;
  flex: 1;
}
header[role="banner"] {
  height: 48px;
  background-color: purple;
}
main[role="main"] {
  background-color: deeppink;
  flex: auto;
}
footer[role="contentinfo"] {
  flex-basis: 48px;
  background-color: gold;
}

score 0 · Answer 6 · answered Mar 20 '15 at 12:41

Ok guys, I fixed it!!!

My stupidity has no limits. Sometimes you just focus on trying to fix one thing and you are not looking in the right place!!

The thing was I had a forgotten div inside the footer with position:relative. That was forcing my footer to go a bit upwards, creating this blank space below it.

Thank you so much for your time, really, much much appreciated, you had no chance to solve my problem since my forgotten div was not posted here, but you did made me think outside the box.

Cheers!

Can't stick footer to bottom. CSS

6 Answers6