Footer not going all the way down my website

Question

I can't make my footer goes all the way down the website. I've looked for similar cases but none of the answers have solved my problem.

I tried with:

min-height: 100%; max-heigth: 100%;

in both the head and body tags with no sucess.

Here's my code.

HTML

<body class="text-center fill">
    <div class="container ">
        <div class="logo mx-auto">
            <img src="img/veamos_que_pasa_big.png" alt="" width="100%" height="auto">
        </div>
    </div>
    <footer class="footer">
        <div class="container">
            <a href="mailto:XXXXXXX">XXXXXX</a>
        </div>
    </footer>

</body>
</html>

CSS

html, body {
  min-height: 100%;
  max-height: 100%;
}

body {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;  
  -webkit-box-pack: center;
  justify-content: center;
  padding-bottom: 0px;
  background-color: #f5f5f5;
  background-image: url("../img/fondo.jpg");
  background-size: cover;
  background-position: center-bottom;
  background-repeat: no-repeat;
}


.fill {
  min-height: 100%;
  max-height: 100%;
}

Thank you for your help guys!

EDIT: This is how it looks now https://s10.postimg.org/hskxh2gh5/Captura_de_pantalla_2018-03-05_a_la_s_22.54.02.png as you can see the footer is not going all the way down to the bottom.

I don't understand your problem, when I run your code I see the footer appearing at the bottom of the window. Where do you want it to be? — Daniel Thompson, Mar 06 '18 at 02:44
You forgot to specify `display: flex` for body, `justify-content: center` and `align-items: center` won't work without it. — Cheslab, Mar 06 '18 at 02:51

score 3 · Accepted Answer · answered Mar 06 '18 at 04:03

You can always use absolute positioning to make the footer appear at the bottom.

.footer {
   position: absolute;
   bottom: 0;
}

html,
body {
  min-height: 100%;
  max-height: 100%;
}

body {
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-bottom: 0px;
  background-color: #f5f5f5;
  background-image: url("../img/fondo.jpg");
  background-size: cover;
  background-position: center-bottom;
  background-repeat: no-repeat;
}

.footer {
  position: absolute;
  bottom: 0;
}

<body class="text-center fill">
  <div class="container ">
    <div class="logo mx-auto">
      <img src="img/veamos_que_pasa_big.png" alt="" width="100%" height="auto">
    </div>
  </div>
  <footer class="footer">
    <div class="container">
      <a href="mailto:XXXXXXX">XXXXXX</a>
    </div>
  </footer>

</body>

Not sure if you wanted a solution with flexbox.

Footer not going all the way down my website

1 Answers1