- This topic is empty.
August 17, 2013 at 7:15 am #147182Mark L.Participant
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?August 17, 2013 at 9:10 am #147187DkaussieParticipant
If you are talking about an absolute or fixed positioned element. Then can you not use the bottom property:
That way you do not need to know the height of the element.August 17, 2013 at 9:39 am #147191
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.August 17, 2013 at 9:48 am #147192Mark L.Participant
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..August 17, 2013 at 10:01 am #147193
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.August 17, 2013 at 5:10 pm #147217Paulie_DMember
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.August 18, 2013 at 7:37 am #147259Tom HouyParticipant
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.August 18, 2013 at 7:55 am #147260
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.August 1, 2016 at 2:00 pm #244129BasketcasesoftwareParticipant
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.August 2, 2016 at 7:31 am #244139
- The forum ‘CSS’ is closed to new topics and replies.