conditional sticky CSS footer with fixed header

Question

I tried to find some solution for the following scenario: - fixed header - if content is too short, footer will stick to bottom - of content is longer, footer will be appended to content and scrollable

I found this, but this works only while the header's not fixed: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

here's some fiddled CSS: http://jsfiddle.net/GxskJ/1/

I can't see what's going wrong and how to fix it. Another solution would be much appreciated as well.

thank you!

Cruller

Answer 1

not sure what you are doing,better description of what you want to achieve would help me in giving you a better answer..

http://jsfiddle.net/mvivekc/2a7SB/1/

Imena

Well, you actually nailed it! :) Thanks! For now, this comes close to what I was searching for. Only missing 3 things: 1) window resize smashes the layout, 2) css only would be cool. 3) The scrollbar looks weird now (in osx), as it's half covered by top and bottom. – Cruller

@honestor for your window resize problem -- you should handle it with JS.. create a function for window.onresize and correct the things which are going out of place.. and pure css -- as far as i've searched its not possible.. if you do achieve it,please feel free to correct me.. although,it is possible in some cases with height auto.. but using position:fixed not possible completly.. :) .. – Imena

Answer 2

Have you thought of doing something like this:

http://jsfiddle.net/YC8DY/

This is how I do it on my website.

Blancheblanchette

thanks for your idea - but it's not the kind of footer technique I was looking for. – Cruller