How to fix footer in the end of the page? - html

Question

I'm trying to fix the footer at the bottom of the page but I can't do that. I've already tried a lot of solutions that I found here on StackOverflow and other websites but none of them worked.
What I have right now is a sticky footer.
Here is the footer html (the footer tag is inside the body tag)
/*BODY*/
html,
body {
position: relative;
height: 100%;
margin: 0px 0px 50px 0px;
padding: 0;
}
/*FOOTER*/
#footer-logo {
position: absolute;
left: 20px;
top: 12.5px;
width: 61px;
height: 25px;
}
.master-footer-list {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
}
.master-footer-list li {
display: inline-block;
vertical-align: middle;
padding-top: 17px;
padding-left: 15px;
}
.master-footer-list a:hover {
text-decoration: underline;
}
.master-footer-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
footer {
font-family: var(--work-sans);
font-weight: 300;
font-size: 14px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
footer div {
margin-bottom: 0px;
height: 50px;
width: 100%;
background-color: black;
}
footer a {
color: #FF6869;
text-decoration: none;
}
footer span {
color: #C8C7CC;
}
<footer>
<div class="master-footer-wrap">
<img id="footer-logo" src="/assets/images/logo-white.png" />
<ul class="master-footer-list">
<li><span>© 2019 – iStudi. Todos os direitos reservados.</span></li>
<li>Termos de Uso</li>
<li>Política de Privacidade</li>
</ul>
</div>
</footer>

Answer 1

The easiest solution is to use flexbox. Here is a working fiddle using the Tailwind library:
<div class="flex flex-col min-h-screen">
<header class="h-8 bg-red">
</header>
<main class="flex-1">
The main content
</main>
<footer class="h-8 bg-green">
</footer>
</div>
https://jsfiddle.net/nartub/b4fwg3um/
Classes are self-explanatory but you can refer to the Tailwind docs to see what each class does.

Answer 2

You had a master-footer-wrap and the footer itself set to position fixed. However, you need to set the position: relative for the body and to absolute for the footer. If you do this while either the footer or the master-footer-wrap is still set to position: fixed, it will remain fixed. Check the snippet below for a working example :)
/*BODY*/
html, body {
position: relative;
height: 150%;
margin: 0px 0px 50px 0px;
padding: 0;
}
/*FOOTER*/
#footer-logo {
position: absolute;
left: 20px;
top: 12.5px;
width: 61px;
height: 25px;
}
.master-footer-list {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
}
.master-footer-list li {
display: inline-block;
vertical-align: middle;
padding-top: 17px;
padding-left: 15px;
}
.master-footer-list a:hover {
text-decoration: underline;
}
/* removed master footer wrap css */
footer {
font-family: var(--work-sans);
font-weight: 300;
font-size: 14px;
text-align: center;
position: absolute; /* position absolute instead of fixed */
bottom: -50px; /* move inside the body margin */
left: 0;
right: 0;
margin-bottom: 0px;
height: 50px;
width: 100%;
background-color: black;
}
/* Removed redundant div/wrapper */
footer a {
color: #FF6869;
text-decoration: none;
}
footer span {
color: #C8C7CC;
}
<footer>
<a href="/"><img id="footer-logo" src="/assets/images/logo-white.png"><a/>
<ul class="master-footer-list">
<li><span>© 2019 – iStudi. Todos os direitos reservados.</span></li>
<li>Termos de Uso</li>
<li>Política de Privacidade</li>
</ul>
</footer>

Answer 3

Your CSS can be greatly simplified. You don't need all of those banners and wrappers. Simply set position: absolute; bottom: 0px; and remove the padding at the bottom of the page, and your footer will stick.
There must be some way to get rid of that hardcoded #footer-logo stuff that makes the text overlap the logo when the width gets thin, but I can't figure it out.
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
footer {
font-family: "Comic Sans MS", sans-serif;
font-size: 14px;
text-align: center;
color: #C8C7CC;
background-color: black;
position: absolute;
bottom: 0px;
min-height: 50px; /* improved support for narrow screens */
width: 100%;
}
#footer-logo {
position: absolute;
left: 20px;
top: 12.5px;
width: 61px;
height: 25px;
}
footer a {
color: #FF6869;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
footer ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
footer ul li {
display: inline-block;
padding-top: 17px;
padding-left: 15px;
}
<footer>
<img id="footer-logo" src="//stackexchange.com/users/flair/6784526.png" />
<ul>
<li>🄯 2019 — wizzwizz4</li>
<li>Lovely link</li>
<li>Visited link</li>
</ul>
</footer>