CODEWITHSUNDEEP
csspositionfootersticky-footer
linkyndy
linkyndy

Reputation: 17900

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.

Upvotes: 1

Views: 752

Answers (1)

Seth
Seth

Reputation: 6260

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.

Upvotes: 1

Related Questions