I am trying to expand a construction with a fixed height header at the top of the screen, and then an iframe below, taking up the remaining space. The solution I came up with is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"><!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--></style> </head> <body> <div style="height:70px;background-color:blue;"></div> <div style="position:absolute;top:70px;bottom:0;left:0;right:0;"> <iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"></iframe> </div> </body> </html>
Essentially, I create an absolutely positioned div under the heading and pick it up to take care of the rest of the space, and then put the full size of the iframe there.
The problem I am facing is that if you paste the code exactly as shown below using XHTML Strict, in each browser (checked by w / chrome / safari / ie8) you will see a vertical scroll bar with a few pixels of space below div
While doing some experiments, I found that if I completely remove the doctype, it works in Safari / Chrome, but IE gets even worse by setting the iframe height to 300 pixels or so. If I install doctype on the transient, it works in safari / chrome but has the same problem as in the strict case for IE8. If I use doctype HTML5, it has the same problem as in all browsers.
Finally, if I remove the iframe in any of these cases, everything will be just fine.
Does anyone have any idea?
html doctype iframe
Keevon
source share