Kobarin's Development Blog

C#やASP.NETなどについての記録です。

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>
〜