Webpage sticky footer

1

Hello guys,

I have problem with my footer, I can’t make it stay always on the bottom of the page, regardless the content of the page. When there is a lot of content everything’s ok, but when content is reduced the footer goes up and a huge white gap is occuring between the footer and the bottom of a page. I saw the others questions connected with this same problem. however I couldn’t find a good solution for my case. appreiciate any help… below is my html and css

<header>....</header>
<section>
     <h1>...</h1>
     <div>...</div>
</section>
<footer>
    <div></div>
    <div></div>
</footer>


html, body { height: 100% }
section {position: relative; display: block; margin: 0 auto; background-color: white; text-align: center; width: 75%; 
 min-height: 100%}
footer {position: absolute; bottom: 0; background-color: #323a41; width: 100%; height: 78px; text-align: center}
2

Because absolute position will position things based on the viewport or the containing container. If it scrolls those position doesn’t get update it.

Use position:fixed, it’ll fixed the footer at the bottom.

3

Okay, but I don’t want it to be fixed, but just situated at the bottom.

4

So I remember when I was trying to do this a long time ago and I had the same issues as you. I never did figure out how to achieve the results I wanted back then. However, I was able to do this today using flex. Here’s my solution:

You can take the lorem ipsum placeholder text out and the footer should remain at the bottom and 100% width. I hope this helps!

1 Like
5

Not clear exactly what behavior you want for your footer. Is this what you’re thinking of?

Sticky footer demo

Explanation:

  • Set the margin and padding for body and html to 0px so we don’t have to calculate that into the equation (I believe the default is 8px on most browsers but it might not be completely standardized)
  • .bigcontainer is used to wrap all the content other than the footer and is then given min-height: calc(100vh - 90px). 100vh means 100% of the viewport height, and 90px is calculated by adding the top and bottom padding of .bigcontainer and footer to the height of footer.
  • footer is then pushed to the bottom of the page when .bigcontainer doesn’t have enough content to push it there naturally, and remains at the bottom after all of the rest of the content when a scrollbar is needed.
2 Likes
6

I’ve been struggling with this issue for too long myself. That demo and explanation was exactly what I needed. Thanks!