How to make footer stick to bottom

Question

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">
           <a href="home"><img src="{{url_for('static', filename='Logo.png')}}" style="height:108px;width:100px;" class="logo_footer" alt="logo"></a></a>
        <div class="contact">
            <h1>Contact us</h1>
            <ul>
            <li><a href="#" target="_blank">Facebook</a></li>
            <li><a href="#" target="_blank">Instagram</a></li>
            <li><a href="#" target="_blank">Telegram</a></li>
            </ul>
        </div>
        <div class="info">
            <h1>Information</h1>
            <ul>
           <li><a href="about.html">About Us</a></li>
           <li> <a href="contact_us.html">Contact Us</a></li>
           <li><a href="#">Return Policy</a></li>
           <li><a href="#">Delivery</a></li>
            </ul>
        </div>
                <div class="account">
            <h1>Account</h1>
            <ul>
           <li><a href="login.html">Log in</a></li>
           <li> <a href="register.html">Register</a></li>
           <li><a href="#"> My cart</a></li>
            </ul>
        </div>
    </footer>
</div>

Please also post your HTML so we can see the layout. – PWL Jul 21 '20 at 06:11 — PWL, Jul 21 '20 at 06:11
Can you provide your whole code here – Jezrel Dave Jul 21 '20 at 06:13 — Jezrel Dave, Jul 21 '20 at 06:13

score 1 · Answer 1 · answered Jul 21 '20 at 06:13

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;

answered Jul 21 '20 at 06:13

Vishnu Raj

136
9

maybe he doesn't want a footer to be fixed, maybe he wants something like keeping footer at the bottom of the page, in spite of content before it – Michael Jul 21 '20 at 06:25
in that case, can't he give a basic min with 100 vh to body ? – Vishnu Raj Jul 22 '20 at 08:16

score 0 · Answer 2 · answered Jul 21 '20 at 06:15

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>

score 0 · Answer 3 · answered Jul 21 '20 at 06:18

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;

score 0 · Answer 4 · edited Jul 21 '20 at 07:36

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.

How to make footer stick to bottom

4 Answers4