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