CODEWITHSUNDEEP
htmlcss
Akshat Mundra
Akshat Mundra

Reputation: 3

How to fix sticky footer? Flex or Grid is not working

I'm setting up a website, and I'm facing the problem of coding a sticky footer that stays down if there is less content.

I've already tried using flex box and grid to code the sticky footer I need. I've tried many tutorials but nothing seems to be working. Here is a snippet of my html and css. 

html{
    height: 100%;
}

body{
min-height: 100%;
flex-direction: column;
display: flex;
}

.footerdiv{
flex: 1 0 auto;
text-align: center;
padding: 60px 0;
}




</section>
    <section class="footer">
      <div class="footerdiv">
        <p>COPYRIGHT © 2019. ALL RIGHTS RESERVED. Design by<a 
id="name" href="X"> Akshat Mundra</a></p>
        <ul>
          <li>
            <a id="privacy" href="#">PRIVACY</a>
            <a id="contact" href="#">CONTACT US</a>
      </li>
    </ul>
  </div>
</section>

Upvotes: 0

Views: 88

Answers (4)

Yuriy Ivanochko
Yuriy Ivanochko

Reputation: 156

I found a few answers before but for me only this code was good)

<style>
.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}
</style>

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

another way to solve it

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-footer {
  margin-top: auto;
}

Upvotes: 0

JKQ
JKQ

Reputation: 11

Just remove the flex: 1 0 auto on the footerdiv class and just create/add this one instead:

.footer {
    margin-top: auto;
}

So that the footer would automatically align at the bottom part of the page even if it has less content on it.

Check it on this codepen link https://codepen.io/anon/pen/YmexgW

Upvotes: 1

Mohrn
Mohrn

Reputation: 816

Stickiness cannot be achieved with flexbox or grid. You can do it with position: fixed though, like I've done here, or with position: sticky.

Also: use the footer tag for footers.

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: teal;
    text-align: center;
    padding: 60px 0;
}

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

You want to apply flex: 1 0 auto to the <section> that comes before the footer.

Note that you'll also want margin: 0 on <body> so that there's no unnecessary vertical scrollbars when there's not enough content to span the full height of the page.

This can be seen in the following:

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  flex-direction: column;
  display: flex;
}

.content {
  flex: 1 0 auto;
}

.footerdiv {
  flex: 1 0 auto;
  text-align: center;
  padding: 60px 0;
}
<section class="content"></section>

<section class="footer">
  <div class="footerdiv">
    <p>COPYRIGHT © 2019. ALL RIGHTS RESERVED. Design by<a id="name" href="X"> Akshat Mundra</a></p>
    <ul>
      <li>
        <a id="privacy" href="#">PRIVACY</a>
        <a id="contact" href="#">CONTACT US</a>
      </li>
    </ul>
  </div>
</section>

Note that each of the following rules that are required to make use of a fixed, sticky footer using the flexbox approach:

Flex footer

Upvotes: 1

Related Questions