Hello All- I have (what should be) a simple page layout with a header div (40px height), footer div (50px height) and middle div containing an IFRAME (600px min height). The whole page should have a minimum height of 690px (40+600+50) but I want the IFRAME section to expand to fit vertically if the browser window is taller (so, the footer will be aligned with the bottom of the browser if the browser window is 690 or taller). I use this page format as a shell that browses lots of different external html files (hence the need for the IFRAME).
The main issue is that the IFRAME is set to 100% height but it seems to default to looking at the full browser height instead of the div it is contained within to arrive at what is "100% height". It was always defaulting to being the full height of the browser window, and causing scrolling by 90px (the combined height of the header and footer). I actually found a hacky solution that works in IE7, but not in Firefox (see example below). The thing that made it work was setting the html bottom margin to 90px, which the IFRAME seems to be reading to scale height properly. For Firefox, this is ignored and the bottom part of the IFRAME and the footer are pushed off by 90px. Any ideas on how to get this to work as it should in both IE and Firefox with correct CSS would be much appreciated! At this point, I'm willing to bag CSS and use a table if that would work and someone can help out with how to do that. -R -------------snip-------------------- <!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";> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> html,body { margin:0 0 90px 0; padding:0; height: 100%; } #wrapper { width: 900px; height: 100%; margin: 0 auto 0 auto; } #header { height: 40px; background-color: #00CC66; } #content { height: 100%; width: 900px; min-height: 600px; } #footer { height: 50px; background-color: #0000FF; } </style> </head> <body> <div id="wrapper"> <div id="header">Header</div> <div id="content"> <iframe name="contentiframe" src="http://www.msn.com"; width="100%" height="100%" frameborder="0"> </iframe> </div> <div id="footer">Footer</div> </div> </body> </html> ------------snip ------------------------------- ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
