[Resolved] Keep the footer at the bottom on short pages

[stairscat]

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

[David]

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;
    }
}

[stairscat]

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.

[David]

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

[stairscat]

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.

[David]

You’re welcome.

[stairscat]

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. 🙂

[David]

I would need to see the Site to gauge whats causing this.

[stairscat]

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.

[David]

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%;
}

[stairscat]

It worked! Thank you sir. 🙂

[David]

You’re welcome

[Whelen Troy]

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!

[David]

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 }

[Whelen Troy]

WORKS REALLY GOOD! thanks David.

[Author]

Posts