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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb"> <head> <title>100% Height</title> <style type="text/css"> body { padding: 0; border: 0; margin: 0; } #top { position: absolute; top: 0; left: 0; width: 100%; height: 100px; background: lightblue; } #bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 125px; background: darkblue; } </style> </head> <body> <div id="main"></div> <div id="top"></div> <div id="bottom"></div> </body> </html>
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.
Many thanks in advance!