Pro Theme: Footer at Bottom of Viewport OR Content, Whichever is greater

[Artificer]

Hello,

I tried to find a reasonable answer to this myself, but just went in circles.

I created a custom footer for interior pages in 1 bar that has a 6em height.

I need it to stay at the bottom of the viewport if the content is sparse, but not stay fixed if the content is actually greater than the viewport area…

I have it set to this:

.interior-footer-1 {
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
}

But, obviously that keeps it fixed in the viewport only. That looks bad when there is more content on a page.

I don’t know the CSS to make it go to the bottom of the content if there is enough content so it would be pushed down.

Can you please help?

I am loving Pro Theme, but I don’t know why this isn’t a built-in footer option. (And no, I don’t want to use the bottom part of the header format… for reasons too numerous to detail.)

I appreciate any assistance so I can push this site live.

Thanks!
Michael

[lely]

Hello Michael,

The alternative way to make footer sit on the bottom is to set minimum height using CSS:

@media (min-width: 980px) {
	.x-container.max.width.offset {
		min-height: calc(100vh - 300px);
	}
}

The 300px should be the sum of the height of your header, footer, and top & bottom margin of the main container. Please adjust it accordingly. In case this selector .x-container.max.width.offset is not working on your case, please share your site specific page URL with less content and with issue regarding this footer so we can double check.

Hope this helps.