CSS dynamically position footer (sticky footer problem)
I am trying to achieve the same effect the sticky footer does, but I 开发者_运维技巧have a problem which does not appear in any tutorial or question asked here: my footer's height is also dynamic.
I have some news items in my footer, so that the height of the footer changes according to the length of those news items. Obviously, I want the footer to be positioned absolute to the bottom of the page when the content's height is smaller than the browser's view-port, and relative to the content when its height is higher than the actual view-port.
Currently I implemented this successfully in jQuery, but I would like a CSS-only method (if any) because some users keep JavaScript disabled in their browsers.
Thank you very much!
EDIT:
My code is pretty much usual: I have a <header>, an <aside>, a <section> and a <footer> in my <body> tag.
In jQuery, I pretty much compare the sum of the heights of these elements (without the footer) to the browser view-port. If the value is greater, I add a position:relative to the footer, else I add a position:absolute; bottom:0 to it.
CSS can do some of it by using bottom:0; position:fixed; however this is not supported by IE6 and maybe 7. I would suggest using the CSS method in tandem with the jQuery solution so all your users will have a similar experience.
加载中,请稍侯......
精彩评论