What's the simplest way to make Casper's footer stick to the bottom of the viewport?

Developer help
1

I’ve done a fair bit of searching and found a previous post on this topic from some time ago, with one reply that includes a link to a page that has 5 different ways of making a sticky footer, but that article is not specific to Ghost.

Since Casper is the default theme and used by so many people, I’m wondering if anybody has a suggestion or perhaps code to make the footer for the Casper theme stick to the bottom of the viewport on pages where there is very minimal content (like an About or Contact page), so that the footer does not appear halfway up the page.

I’m comfortable with either injecting css or altering the theme files.

2

Hey @DonaldH, this has just been fixed in this commit. The fix was included in the latest version of Casper. Thanks for the report :slightly_smiling_face:

1 Like
3

Thanks @minimaluminium! I’m using the Casper theme but with a few modifications. What would be the easiest or best way to add this fix to my theme now? I could redownload the default Casper theme, install it, and remake my modifications but I’d prefer not to if possible :slightly_smiling_face:

4

The fix is pretty simple, which you can add as a code injection if you don’t want to re-download the theme. The CSS is:

<style>
    .viewport > main {
        flex-grow: 1;
    }
</style>
1 Like