I've encountered an issue where my footer is not extending all the way down the website, despite trying various solutions. Here's what I attempted:
I used the following CSS properties:
min-height: 100%;
max-height: 100%;I included these properties in both the head and body tags without success. Below is a snippet of 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%;
}
Any assistance would be greatly appreciated!
EDIT: The current layout can be viewed here. As shown in the screenshot, the footer is still not reaching the bottom as desired.