How to make footer stick to bottom [duplicate] - html

Question

This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 2 years ago.
Trying to make the footer in my html css website stick down but nothing works. I've tried changing the position to absolute and fixed and setting bottom: 0 and doing everything but nothing works. Also, is there a better way to make my logo aligned in the middle? Heres my css:
.footer{
background-color: #d62929;
clear: both;
width: 100%vw;
display:block;
overflow: hidden;
padding-top:10px;
padding-bottom: 10px;
min-height: 100%vw;
}
.contact{
margin-left: 30px;
margin: 0 auto;
display:block;
float: left;
padding-right: 50px;
}
.info{
margin-left: 30px;
margin: 0 auto;
padding-left: 30px;
display:block;
float: left;
padding-right: 50px;
}
.account{
margin-left: 30px;
margin: 0 auto;
padding-left: 30px;
display:block;
float: left;
padding-right: 50px;
}
a{
text-decoration:none;
color: black;
font-family: times new roman;
font-size: 18px;
text-align: center;
}
ul{
list-style: none;
text-align: left;
}
.logo_footer{
float: left;
padding: 40px 0;
margin-left: 20px;
margin-right: 40px;
}
h1{
color: white;
font-size: 24;
}
li{
padding: 5px;
}
Heres my html for the footer:
<div>
<footer class="footer">
<img src="{{url_for('static', filename='Logo.png')}}" style="height:108px;width:100px;" class="logo_footer" alt="logo"></a>
<div class="contact">
<h1>Contact us</h1>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Telegram</li>
</ul>
</div>
<div class="info">
<h1>Information</h1>
<ul>
<li>About Us</li>
<li> Contact Us</li>
<li>Return Policy</li>
<li>Delivery</li>
</ul>
</div>
<div class="account">
<h1>Account</h1>
<ul>
<li>Log in</li>
<li> Register</li>
<li> My cart</li>
</ul>
</div>
</footer>
</div>

Answer 1

You can make position:fixed; instead of position:absolute; This will make it fixed to the bottom. if there are any other div or something that's causing an overlay issue, use z-index:5;

Answer 2

I used postion:relative on wrapper div and postion: sticky on footer.
.sectionWrapper {
position: relative;
}
.header {
height: 10vh;
width: 100%;
background: red;
}
.body {
height: 100vh;
width: 100%;
background: blue;
border: 1px solid black;
}
.footer {
height: 20vh;
width: 100%;
background-color: green;
position: sticky;
bottom: 0%;
}
<div class="sectionWrapper">
<section class="header">Header</section>
<section class="body">Body 1</section>
<section class="body">Body 2</section>
<section class="body">Body 3</section>
<section class="footer">footer</section>
</div>

Answer 3

There are multiple ways for that.
Min-height:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
position: relative;
min-height: 100%;
Margin-top, here you do need to specify footer height:
* {
margin: 0;
padding: 0;
}
html,
body,
.footer {
height: 100%;
}
.footer__content {
box-sizing: border-box;
This the best, because the height of the footer doesn't matter:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
display: table;
height: 100%;
This way is a bit different from others because it uses CSS calc() function, and you need to know exact footer height:
* {
margin: 0;
padding: 0;
}
.footer__content {
min-height: calc(100vh - 80px);
}
This is the most correct way, however it works only in modern browsers, as in the 3rd example, the height doesn't matter:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.footer {
display: flex;
flex-direction: column;

Answer 4

In my project, I am using this to solve same task, it's the easiest solution that I found in Internet:
body {
position: relative;
min-height: 100vh;
}
.footer {
position: absolute;
bottom: 0px;
}
Here is important to use min-height property in body and not the height one, because actual height of your page can be more that user's screen size.
This solution makes your footer to snap not to screen bottom, but to page bottom.