Make footer of unknown height stick to bottom?

[Mark L.]

All solution that make footers stick to the bottom I’ve seen require you to know the height of the footer. What about a footer on a responsive website that can vary quite a bit in height? Any ideas how to make it stick to the bottom of the page?

[Dkaussie]

If you are talking about an absolute or fixed positioned element. Then can you not use the bottom property:
bottom:0px;
That way you do not need to know the height of the element.

[jurotek]

Whether you use sticky absolute positioned footer which gets pushed down by the content or you use fixed positioned footer you always have to know the footer height at different beak-points if the footer varies in height so you can apply correct bottom padding or margin on content div so the content clears the footer and is always visible above the footer. For that you use media queries to do that.

[Mark L.]

No, I don’t want it to be absolutely positioned (at least with respect to the viewport). Just a regular footer that scrolls with the content flow, but sits at the bottom of the page on pages where the content doesn’t fill up the whole page. Basically a version of https://css-tricks.com/snippets/css/sticky-footer/ but without specifying the height.

@jurotek: How would I know at what pixel points a bunch of text blocks/lists/paragraphs move to a new line (thus increasing the height of the footer), in every browser environment? Any such breakpoint seems to me like a “magic number” just waiting to break the layout. I guess I could be conservative and add a large gap just in case, but this would then add scroll on pages that shouldn’t normally have it..

[jurotek]

You don’t need to specify height on the footer but you must know the height at different break-points so you can apply correct negative margin on page-wrap with media query.

[Paulie_D]

What about a footer on a responsive website that can vary quite a bit in height?

Even responsive sites don’t change the heights of elements too much….I really don’t see a problem with using media queries.

Any such breakpoint seems to me like a “magic number”.

Of course it would be…and that’s the point. You re-size until the layout breaks and add a media query to change things so it no longer breaks.

That’s standard.

[Tom Houy]

Would you really want a static footer, that is only going to get taller and taller on narrower screens such as mobile devices? Sounds like that would take up a lot of space vertically and leave little room for the main content on a 320px wide screen for example. I would probably just make the footer not be sticky on mobile devices via media queries.

[jurotek]

That’s a good point. I cannot agree more. If the fixed footer is minimal (fixed) height containing just some info for contact or phone numbers or what not, than I think it’s ok to be fixed on all devises. But if the footer has lot of content in form of grid, that fixed footer will grow taller as view-port width decreases and might possibly take up way too much space leaving very little room for actual content.

[Basketcasesoftware]

My site (I’m doing a rebuild and the content is sparse at the moment) has sticky footers without using any definite pixel height for the footer content other than 1 pixel (seriously). I use CSS tables. http://BasketcaseSoftware.com/
Just inspect the footer code. My general rule of thumb is if I use anything BUT CSS/HTML or used fixed sizes then there is a design fail.

I know that is an old thread but I was using my technique long before this was posted. I’ll post my code later once I’m more familiar with this site.

[Paulie_D]

While we’re raising threads from the dead…

Flexbox can solve this

http://codepen.io/Paulie-D/pen/JKaJxV

[Author]

Posts