Kevin Powell - Community•2w ago

Fixed Footer

Hi, I've searched the web a lot but can't get the result I want. I want the footer to appear at the bottom of the page when the content does not fill the page, but I always have a scroll bar and space under the footer. However when I have a lot of content it works as expected. I scroll down and the footer is placed after the content with no space under. Can someone tell me where I'v e gone wrong? Thanks

index.html

style.css

6 Replies

Tok124 (CSS Nerd)•2w ago

@StainingLamb272 This is what you want?

Chris Bolson•2w ago

Can someone tell me where I'v e gone wrong?

In your code you haven't done anything to place the footer at the bottom. Probably the simplest way to achieve what you want to do is to place the header, content and footer in a wrapper (or use the body itself though some people don't like doing that). Give the wrapper a min height of the viewport and display grid. Finally use grid-template-rows to let the main content area expand to fill the available space btween the header and footer.

<div class="wrapper">
  <header></header>
  <main></main>
  <footer></footer>
</div>

<div class="wrapper">
  <header></header>
  <main></main>
  <footer></footer>
</div>

.wrapper{
  min-height: 100svh;  
  display: grid;
  grid-template-rows: auto 1fr auto:
}

.wrapper{
  min-height: 100svh;  
  display: grid;
  grid-template-rows: auto 1fr auto:
}

By defining "auto" for the header and footer rows they will automaticall take up the space required, leaving the rest of the viewport (minimum) for the content. If the content is longer than the viewport height, it will expand normally, pushing the footer down.

StainingLamb272OP•2w ago

Thanks for the reply but I don't want to see the footer when scrolling vertically is necessary, i.e I want the footer to come into view after scrolling to the bottom

Tok124 (CSS Nerd)•2w ago

In this case, simply just remove position:sticky; and bottom:0; leave everything else the same and you got it

Tok124 (CSS Nerd)•2w ago

kevin even have a video about this https://www.youtube.com/watch?v=yc2olxLgKLk

Kevin Powell

YouTube

Easy sticky footer - stop a footer from floating up a short page!

Having the footer of the page just floating around in the middle just looks... bad. So let's see how we can fix it with both flexbox and grid in this video! As an added bonus, both of them are really easy to do! This CSS-Tricks articles has a few other ways, including different ways to do it with flexbox and grid in case you run into issues wit...

StainingLamb272OP•2w ago

Thanks for the help guys! I went with the flexbox solution😀

Gaming

Programming

Fixed Footer

Did you find this page helpful?