table内のiframeを画面一杯の高さにする方法
現象
<!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> <style type="text/css"> * { margin: 0; } html { height: 100%; } body { height: 100%; width: 100%; margin: 0px auto; padding: 0; } </style> <head> <body> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <iframe src="page.htm" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe> </td> </tr> </table> </body> </html>
このようなコードを書いても、Table自体は画面いっぱいの高さになるけど、iframeはその高さを継承しない。
原因
以下の部分を取り除くと、iframeの高さも継承される。
<!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> 〜