Search code examples
htmlcsstwitter-bootstrapfooter

Footer not going all the way down my website


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.


Solution

  • 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.