Shapely Theme Sticky Footer using flex css

Shapely
1

Hi guys,

My first post here. I am working with Shapely (and am liking it, thanks Colorlib!) and wanted a sticky footer.

I ran into a lot of problems with mobile, footers overlapping content etc…

I ended up implementing a flex based solution.
I’m self taught and I am sure this may not be optimal or work on all browsers but just in case this is useful:

<------ start code ------>

html, body {
    height: 100%;    
}
#page {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

#masthead {
	flex: 0 0 auto;
}

#content {
    display: flex;
    flex-direction: column;
	  flex: 1 0 calc(100% - 56px);
}

.header-callout {
	flex: 0 1 auto;
}

.content-area {
    flex: 1 0 auto;
}

.footer-callout {
	flex: 0 1 auto;
}

#colophon {
    flex: 0 0 auto;
}

Would love critiques/suggestions. Sorry I can’t show you my site, login required currently.

Cheers,
-MM

2

Hey there,
Hope you’re doing well today

This code looks pretty good in my opinion. If you’re not having any problem across the main browsers then you should be good to go.

I’ll keep this code just in case somebody else needs it. Thanks for reaching out.

Best Regards,
Support