giving body a heigth of 100% doesnt seem good

[saltnpixels]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

This sticky footer requires giving body a height of 100%. If you give body a height of 100%, and you have more content then the height of the viewport, the body will not seem to contain the rest of the site, which might be problematic. This solution works when there is little content and that is understandable for the goal of showing a sticky footer. But this can break when there is a page that has lots of content.

What did you expect to see?

A better sticky footer solution where the body contains the site even when there is a lot of copy.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

* Folder: `en-us/web/css/layout_cookbook/sticky_footers` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/layout_cookbook/sticky_footers/index.md * Last commit: https://github.com/mdn/content/commit/05c4984fad5a20c26be6e58c746614217837789f * Document last modified: 2023-11-13T12:15:45.000Z

[saltnpixels]

A better way to do this would be to use a min-height of 100dvh on body and give footer:

footer {
  position: sticky;
  top: 100vh;
}

[Josh-Cena]

Can you expand on what you mean? When does it become an issue?

It's fine for your content to grow beyond the bounds of body. That just makes body scrollable. You can add a bunch of paragraphs to the example and the result will appear fine.

[saltnpixels]

Sorry I’m just seeing this.

If you give body a height of 100% and then put content in that goes passed the view height the body will not contain it. This can cause issues.

Yes, the body will become scrollable. But if you inspect the body element, you will see that it does not contain the content below the fold.

[Josh-Cena]

@saltnpixels: it's not a problem that body does not span the whole scroll height of the document. As long as everything is still reachable via scrolling, it's a normal design pattern. At least that's my understanding; do you have references saying otherwise?

[saltnpixels]

Eh…. not in my experience. I don’t remember why, but it caused issues with overflow and position sticky items which I believe stopped sticking once the content is considered finished scrolling

[Josh-Cena]

Hmmm, would be interesting to see a demo, but this particular example works fine IMO, unless it can be proven otherwise.

[saltnpixels]

I’ll try and throw something together tomorrow. I meaning made this ticket cause I was struggling to make a sticky fitter that worked in all cases. this one was not.