I am currently fiddling around with 'sticky' footers, and have come across the usual links as referenced in Q: Why not used position:fixed for a "sticky" footer?
While I'm happy that these fixes exist, I am curious to find out why the footer issue was not addressed in the reengineering spirit of HTML5. Semantic issues aside, an web document author would expect a footer to have a default behaviour, i.e, be a 'sticky footer' : stay at the bottom of the page, unless the page contents are longer.
I feel this is a missed opportunity to do away with a lot of hacks, and would like to know what were the considerations in not assigning a 'sticky' behaviour to the footer tag.
Add the "position: absolute;" coding inside the "#footer" bracket "{" and "}" tags. In addition, add "bottom: 0;" in the line directly beneath the "position" coding. Now the footer is positioned absolutely at the bottom of the Web page "DIV" container.
A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.
html. < div id = "footer" >This is a footer. This stays at the bottom of the page.
HTML5 doesn’t define the layout of HTML. That’s CSS’s job.
I’m not sure if a layout like you’ve described has ever been considered for CSS, so I’m not sure what the pros and cons would be.
CSS layouts don’t generally allow any reference to the browser window other than via position: fixed;
, which Internet Explorer didn’t support in version 6, so I presume there are challenges involved in implementing such layout capabilities. I’d love to hear from anyone who knows some specifics though.
Also, <footer>
s aren’t necessarily footers for the entire page — they can just be footers for a <section>
or similar. You wouldn’t want all of the footers on a page bunched up at the bottom of the page/browser window.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With