Archived topic
Keep the footer at the bottom on short pages
21 replies · Started by stairscat on December 19, 2018
Hi,
I'd like to have my footer at the bottom of the browser on short pages. Unfortunately, all solutions I find fix the footer to be always at the bottom, however on pages with more content it will overlap the content. I only want it to sit at the bottom when the content is too short.
Is there a way to do this? I tried plenty of CSS but no luck so far.
It would be cool if this feature was integrated into generatePress!
Best regards,
stairscat
Hi there,
give this a shot, although personally i would just look to fill the page :)
@media (min-width: 1024px) {
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
.site-footer {
margin-top: auto;
}
}Ouh yeah, it seems to work! Thanks David. :)
Except for one detail, the very bottom of the footer seems to be cut off. I tried playing around with your code but couldn't figure out which part does that. I also tried playing with the padding of the footer, but no luck.
You can see it here.
Looks good to me on FF, Chrome and Safari, its only when the window height is low that it cuts off as the footer hits the sidebar
Okay, I know why it is, it's because of the black Admin bar at the top. When I'm logged out, it's perfect :) Thanks again David for your help and quick support.
You're welcome.
Actually, I have a little problem with the code. I used it on a site for another client too and noticed that the content area would become much more narrow on some pages. I tried removing the min-width, but it didn't change anything. Any idea what it could be? Thank you. :)
I would need to see the Site to gauge whats causing this.
This page is the most extreme. It has become very narrow through the code (both main content box and side widgets).
The code is active on that site.
Yeah - it is one of the bugbears with using flex for this as the containers have an auto width on them so they resize to fit their contents. Try this:
.container.grid-container {
width: 100%;
}It worked! Thank you sir. :)
You're welcome
Hello David,
Does the code above work on mobile? I tried checking my site on mobile, like iPhone X, it seems to not work.
Can you please help me? thanks!
The code here is within a media query so it only applies to desktops. If you wanted it on all devices then you would remove the @media (min-width: 1024px) { and the very last closing }
WORKS REALLY GOOD! thanks David.
