I’m looking for a bit of a help with a 100% height problem. I’ve spent quite a while attempting to find a pure CSS solution, which is supported by the full range of popular browsers (IE6+, FF2+, Safari 3+, Opera 9+, Google Chrome). My personal opinion is that I can’t achieve what I’d like to do with CSS alone, but before implementing a CSS/JavaScript solution using jQuery, I thought I’d seek some advice from the experts!
I’ve included the XHTML and CSS that I’ve been using to try and find a solution to this problem below:
What I’d like to achieve is to have the #main DIV positioned between the #top and #bottom DIVs, filling the available space at all times (i.e. 100% width and height) regardless of viewport dimensions, screen resolution, etc. I’m intending on putting a scalable Flash movie also set to 100% width and height within the #main DIV.
I’d greatly appreciate any suggestions or advice! I’m happy to provide more information if clarification is needed in order to help find a solution.
Next, you want the center column to go to the bottom. The easiest way to do this is to just fake it with a repeating image on the wrapper (the outer container).
Eric - Many thanks for your solution. I’m a little embarassed that it’s so simple if I’m honest…! I think it was one of those situations where I’d been looking at it for so long that I’d managed to convince myself it was impossible to do!!
For those who are interested, I’ve included the XHTML and CSS which incorporates Eric’s solution below:
Eric - Many thanks for your solution. I’m a little embarassed that it’s so simple if I’m honest…! I think it was one of those situations where I’d been looking at it for so long that I’d managed to convince myself it was impossible to do!
Yes a fresh pair of eyes is always useful Glad you got it working to your liking.