iframe+tableの高さ

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

HTML
ネット販売をしています。商品ページです。今までにiframeは問題なく使用していました。テーブルで画像（商品リスト）でのリンクです。今までは5行5列等です。今回6行6列で1行目画像2行目テキスト×3=6行です。結果は下が切れています。1行目の画像は問題ないのですがその下です。
画像は元画像をcssで縮小しています。
テーブルに問題があるのでしょうか？

該当のソースコード

<iframe id="myFrame" class="frame" frameborder="0" width="100%" height="100％" src="http://www.malsyo.co.jp/iframe-footer.html" scrolling="no"></iframe>

<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="1">

css
.lbi img {
	width: 158px;
	height: auto;
	clear: both;
	float: left;
}

HTML  <table width="100%" height="100%" border="0" cellpadding="1" cellspacing="1">
    <tr>
      <td><div class="lbi"><a href="http://www.malsyo.co.jp/diningbord_t/calm70.html" target="_blank"><img src="diningbord/calm/70_01.jpg" width="700" height="700" alt="calm70" /></a></div></td>
      <td><div class="lbi"><a href="http://www.malsyo.co.jp/diningbord_t/calm120.html" target="_blank"><img src="diningbord/calm/120d.jpg" width="700" height="700" alt="calm70" /></a></div></td>
      <td><div class="lbi"><a href="http://www.malsyo.co.jp/diningbord_t/mitte160.html" target="_blank"><img src="diningbord/mitte/160_01.jpg" width="700" height="700" alt="160" /></a></div></td>
      <td><div class="lbi"><a href="http://www.malsyo.co.jp/diningbord_t/neon.html" target="_blank"><img src="diningbord/neon/soai-neon-01.jpg" width="700" height="525" alt="ネオン" /></a></div></td>
      <td><div class="lbi"><a href="http://www.malsyo.co.jp/dining-set_t/newton-zeusu.html" target="_blank"><img src="dining-set/tarny/newton-set_01.jpg" width="650" height="650" alt="ニュートン" /></a></div></td>
      <td><div class="lbi"><a href="http://www.malsyo.co.jp/dining-set_t/ys-aki.html" target="_blank"><img src="dining-set/ys-aki/aki_img01.jpg" width="700" height="700" alt="あき" /></a></div></td>
    </tr>
    <tr>
      <td><span class="font_lbi"><a href="http://www.malsyo.co.jp/diningbord_t/calm70.html" target="_blank">ダイニングボード・レンジボード　カーム70　calm70
        幅705×奥行515×高さ1945mm</a><br />
       <font color="#ff0000"> 71,280円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="http://www.malsyo.co.jp/diningbord_t/calm120.html" target="_blank">食器棚・ダイニングボード　カーム120　calm120
        幅1175×奥行460×高さ1945mm</a><br />
        <font color="#ff0000">127,050円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="http://www.malsyo.co.jp/diningbord_t/mitte160.html" target="_blank">食器棚・ダイニングボード　ミッテ　Mitte　160R （開梱・設置・梱包資材処分）</a> 
      <a href="http://www.malsyo.co.jp/diningbord_t/mitte160.html" target="_blank">幅16050×奥行480×高1985mm</a> </span><br />
        <font color="#ff0000">159,390円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="http://www.malsyo.co.jp/diningbord_t/neon.html" target="_blank">食器棚　両面ハッチ　ネオン （開梱・設置・梱包資材処分）　幅1175×奥行470×高さ1950mm</a><br />
        <font color="#ff0000">162,800円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="http://www.malsyo.co.jp/dining-set_t/newton-zeusu.html" target="_blank">ダイニング5点セット（セラミック天板）Newton　ニュートン<br />
        テーブル：1500×奥行800×高720mm</a><br />
        <font color="#ff0000">122,5000円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="http://www.malsyo.co.jp/dining-set_t/ys-aki.html" target="_blank">クルミ材・柿渋塗装　ダイニングエクステンションテーブル・チェア</a><br />
          <font color="#ff0000"> 5点セット（テーブル×1+チェア×4）267,300円（税込）</font></span></td>
    </tr>
    <tr>
      <td><div class="lbi"><a href="dining-set_t/m-keyaki.html" target="_blank"><img src="dining-set/NT/m-keyaki_00.jpg" width="650" height="650" alt="和室用ダイニングセット" /></a></div></td>
      <td><div class="lbi"><a href="dining-set_t/togetu1200.html" target="_blank"><img src="dining-set/cherry/1200.jpg" width="600" height="600" alt="渡月120" /></a></div></td>
      <td><div class="lbi"><a href="book/ohx_t/cs924.html" target="_blank"><img src="book/ohx/cs924.jpg" width="600" height="600" alt="924" /></a></div></td>
      <td><div class="lbi"><a href="book/shirai_t/sep-1911prt-dk.html" target="_blank"><img src="book/shirai/SEP-1911PRTDK.pt01.jpg" width="700" height="700" alt="1911" /></a></div></td>
      <td><div class="lbi"><a href="book/iland_t/216-o.html" target="_blank"><img src="book/iland/000000000988.jpg" width="600" height="600" alt="216" /></a></div></td>
      <td><div class="lbi"><a href="book/iland_t/326-o.html" target="_blank"><img src="book/iland/000000000989.jpg" width="600" height="600" alt="216" /></a></div></td>
    </tr>
    <tr>
      <td><span class="font_lbi"><a href="dining-set_t/m-keyaki.html" target="_blank">ダイニング5点セット　大内　テーブル高さ62cmタイプ</a><br />
        <font color="#ff0000">187,000円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="dining-set_t/togetu1200.html" target="_blank">和室用ダイニング5点セット（渡月・和座楽）幅120×75cmタイプ</a><br />
        <font color="#ff0000">129,800円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="book/ohx_t/cs924.html" target="_blank">CDストッカー　CS924 CD約924枚収納可能</a><br />
        <font color="#ff0000">46,200円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="book/shirai_t/sep-1911prt-dk.html" target="_blank">パーテーションラック・本棚　セパルテック　[SEP-1911PRT　DK]</a><br />
        <font color="#ff0000">25,000円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="book/iland_t/216-o.html" target="_blank">スライド書棚 本棚216-O　 2列 オープン 幅84×高192cm</a><br />
        <font color="#ff0000">48,500円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="book/iland_t/326-o.html" target="_blank">スライド書棚 本棚326-O　 3列 オープン 幅127×高192cm</a><br />
        <font color="#ff0000">73,000円（税込）</font></span></td>
    </tr>
    <tr>
      <td><div class="lbi"><a href="tv-board_t/mk-anima.html" target="_blank"><img src="tv-board/mk/anima_img01.jpg" width="700" height="700" alt="アニマ" /></a></div></td>
      <td><div class="lbi"><a href="tv-board_t/mk-raduni.html" target="_blank"><img src="tv-board/mk/tallo_img01.jpg" width="700" height="701" alt="タリオ" /></a></div></td>
      <td><div class="lbi"><a href="tv-board_t/mk-jing-oln.html" target="_blank"><img src="tv-board/mk/jign_oln_img01.jpg" width="700" height="700" alt="OLN" /></a></div></td>
      <td><div class="lbi"><a href="tv-board_t/mk-lamda.html" target="_blank"><img src="tv-board/mk/lamda_img01.jpg" width="700" height="700" alt="ラムダ" /></a></div></td>
      <td><div class="lbi"><a href="tv-board_t/mk-raduni.html" target="_blank"><img src="tv-board/mk/raduni_img01.jpg" width="700" height="700" alt="ヌーボ" /></a></div></td>
      <td><div class="lbi"><a href="tv-board_t/mk-alb.html" target="_blank"><img src="tv-board/mk/alb_img01.jpg" width="700" height="700" alt="アルバ" /></a></div></td>
    </tr>
    <tr>
      <td><span class="font_lbi"><a href="tv-board_t/mk-anima.html" target="_blank">TVボード　アニマ</a><br />
      <font color="#ff0000">幅1800cm　173,800円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="tv-board_t/mk-raduni.html" target="_blank">TVボード　ラドゥーニ・ヌーボ</a><br />
      <font color="#ff0000">幅2400cm　184,800円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="tv-board_t/mk-jing-oln.html" target="_blank">TVボード　ジグ・ヌーボ</a><br />
      <font color="#ff0000">幅1500cm　93,750円（税込）</font></span></td>
      <td class="font_lbi"><a href="tv-board_t/mk-lamda.html" target="_blank">TVボード　ラムダ</a><br />
        <font color="#ff0000">幅1800cm　117,150円（税込）</font></td>
      <td><span class="font_lbi"><a href="tv-board_t/mk-raduni.html" target="_blank">TVボード　ラドゥーニ・ヌーボ</a><br />
      <font color="#ff0000">幅2400cm　166,650円（税込）</font></span></td>
      <td><span class="font_lbi"><a href="tv-board_t/mk-alb.html" target="_blank">TVボード　アルバ</a><br />
      <font color="#ff0000">幅1800cm　114,400円（税込）</font></span></td>
    </tr>
  </table>

試したこと

ネットでいろいろなサイト「リズムのじかん」等を見ましたがダメです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[miyabi_pudding]

HTMLならびに、CSSのソースコードを全て掲示してください。
質問文は編集できます。

[rikichi]

css
.lbi img {
width: 158px;
height: auto;
clear: both;
float: left;
}
HTML
<table width="100%" height="100%" border="0" cellpadding="1" cellspacing="1">
<tr>
<td><div class="lbi"><a href="http://www.malsyo.co.jp/diningbord_t/calm70.html" target="_blank"><img src="diningbord/calm/70_01.jpg" width="700" height="700" alt="calm70" /></a></div></td>
<td><div class="lbi"><a href="http://www.malsyo.co.jp/diningbord_t/calm120.html" target="_blank"><img src="diningbord/calm/120d.jpg" width="700" height="700" alt="calm70" /></a></div></td>
<td><div class="lbi"><a href="http://www.malsyo.co.jp/diningbord_t/mitte160.html" target="_blank"><img src="diningbord/mitte/160_01.jpg" width="700" height="700" alt="160" /></a></div></td>
<td><div class="lbi"><a href="http://www.malsyo.co.jp/diningbord_t/neon.html" target="_blank"><img src="diningbord/neon/soai-neon-01.jpg" width="700" height="525" alt="ネオン" /></a></div></td>
<td><div class="lbi"><a href="http://www.malsyo.co.jp/dining-set_t/newton-zeusu.html" target="_blank"><img src="dining-set/tarny/newton-set_01.jpg" width="650" height="650" alt="ニュートン" /></a></div></td>
<td><div class="lbi"><a href="http://www.malsyo.co.jp/dining-set_t/ys-aki.html" target="_blank"><img src="dining-set/ys-aki/aki_img01.jpg" width="700" height="700" alt="あき" /></a></div></td>
</tr>
<tr>
<td><span class="font_lbi"><a href="http://www.malsyo.co.jp/diningbord_t/calm70.html" target="_blank">ダイニングボード・レンジボード　カーム70　calm70
幅705×奥行515×高さ1945mm</a><br />
<font color="#ff0000"> 71,280円（税込）</font></span></td>
<td><span class="font_lbi"><a href="http://www.malsyo.co.jp/diningbord_t/calm120.html" target="_blank">食器棚・ダイニングボード　カーム120　calm120
幅1175×奥行460×高さ1945mm</a><br />
<font color="#ff0000">127,050円（税込）</font></span></td>
<td><span class="font_lbi"><a href="http://www.malsyo.co.jp/diningbord_t/mitte160.html" target="_blank">食器棚・ダイニングボード　ミッテ　Mitte　160R （開梱・設置・梱包資材処分）</a>
<a href="http://www.malsyo.co.jp/diningbord_t/mitte160.html" target="_blank">幅16050×奥行480×高1985mm</a> </span><br />
<font color="#ff0000">159,390円（税込）</font></span></td>
<td><span class="font_lbi"><a href="http://www.malsyo.co.jp/diningbord_t/neon.html" target="_blank">食器棚　両面ハッチ　ネオン （開梱・設置・梱包資材処分）　幅1175×奥行470×高さ1950mm</a><br />
<font color="#ff0000">162,800円（税込）</font></span></td>
<td><span class="font_lbi"><a href="http://www.malsyo.co.jp/dining-set_t/newton-zeusu.html" target="_blank">ダイニング5点セット（セラミック天板）Newton　ニュートン<br />
テーブル：1500×奥行800×高720mm</a><br />
<font color="#ff0000">122,5000円（税込）</font></span></td>
<td><span class="font_lbi"><a href="http://www.malsyo.co.jp/dining-set_t/ys-aki.html" target="_blank">クルミ材・柿渋塗装　ダイニングエクステンションテーブル・チェア</a><br />
<font color="#ff0000"> 5点セット（テーブル×1+チェア×4）267,300円（税込）</font></span></td>
</tr>
<tr>
<td><div class="lbi"><a href="dining-set_t/m-keyaki.html" target="_blank"><img src="dining-set/NT/m-keyaki_00.jpg" width="650" height="650" alt="和室用ダイニングセット" /></a></div></td>
<td><div class="lbi"><a href="dining-set_t/togetu1200.html" target="_blank"><img src="dining-set/cherry/1200.jpg" width="600" height="600" alt="渡月120" /></a></div></td>
<td><div class="lbi"><a href="book/ohx_t/cs924.html" target="_blank"><img src="book/ohx/cs924.jpg" width="600" height="600" alt="924" /></a></div></td>
<td><div class="lbi"><a href="book/shirai_t/sep-1911prt-dk.html" target="_blank"><img src="book/shirai/SEP-1911PRTDK.pt01.jpg" width="700" height="700" alt="1911" /></a></div></td>
<td><div class="lbi"><a href="book/iland_t/216-o.html" target="_blank"><img src="book/iland/000000000988.jpg" width="600" height="600" alt="216" /></a></div></td>
<td><div class="lbi"><a href="book/iland_t/326-o.html" target="_blank"><img src="book/iland/000000000989.jpg" width="600" height="600" alt="216" /></a></div></td>
</tr>
<tr>
<td><span class="font_lbi"><a href="dining-set_t/m-keyaki.html" target="_blank">ダイニング5点セット　大内　テーブル高さ62cmタイプ</a><br />
<font color="#ff0000">187,000円（税込）</font></span></td>
<td><span class="font_lbi"><a href="dining-set_t/togetu1200.html" target="_blank">和室用ダイニング5点セット（渡月・和座楽）幅120×75cmタイプ</a><br />
<font color="#ff0000">129,800円（税込）</font></span></td>
<td><span class="font_lbi"><a href="book/ohx_t/cs924.html" target="_blank">CDストッカー　CS924 CD約924枚収納可能</a><br />
<font color="#ff0000">46,200円（税込）</font></span></td>
<td><span class="font_lbi"><a href="book/shirai_t/sep-1911prt-dk.html" target="_blank">パーテーションラック・本棚　セパルテック　[SEP-1911PRT　DK]</a><br />
<font color="#ff0000">25,000円（税込）</font></span></td>
<td><span class="font_lbi"><a href="book/iland_t/216-o.html" target="_blank">スライド書棚 本棚216-O　 2列 オープン 幅84×高192cm</a><br />
<font color="#ff0000">48,500円（税込）</font></span></td>
<td><span class="font_lbi"><a href="book/iland_t/326-o.html" target="_blank">スライド書棚 本棚326-O　 3列 オープン 幅127×高192cm</a><br />
<font color="#ff0000">73,000円（税込）</font></span></td>
</tr>
<tr>
<td><div class="lbi"><a href="tv-board_t/mk-anima.html" target="_blank"><img src="tv-board/mk/anima_img01.jpg" width="700" height="700" alt="アニマ" /></a></div></td>
<td><div class="lbi"><a href="tv-board_t/mk-raduni.html" target="_blank"><img src="tv-board/mk/tallo_img01.jpg" width="700" height="701" alt="タリオ" /></a></div></td>
<td><div class="lbi"><a href="tv-board_t/mk-jing-oln.html" target="_blank"><img src="tv-board/mk/jign_oln_img01.jpg" width="700" height="700" alt="OLN" /></a></div></td>
<td><div class="lbi"><a href="tv-board_t/mk-lamda.html" target="_blank"><img src="tv-board/mk/lamda_img01.jpg" width="700" height="700" alt="ラムダ" /></a></div></td>
<td><div class="lbi"><a href="tv-board_t/mk-raduni.html" target="_blank"><img src="tv-board/mk/raduni_img01.jpg" width="700" height="700" alt="ヌーボ" /></a></div></td>
<td><div class="lbi"><a href="tv-board_t/mk-alb.html" target="_blank"><img src="tv-board/mk/alb_img01.jpg" width="700" height="700" alt="アルバ" /></a></div></td>
</tr>
<tr>
<td><span class="font_lbi"><a href="tv-board_t/mk-anima.html" target="_blank">TVボード　アニマ</a><br />
<font color="#ff0000">幅1800cm　173,800円（税込）</font></span></td>
<td><span class="font_lbi"><a href="tv-board_t/mk-raduni.html" target="_blank">TVボード　ラドゥーニ・ヌーボ</a><br />
<font color="#ff0000">幅2400cm　184,800円（税込）</font></span></td>
<td><span class="font_lbi"><a href="tv-board_t/mk-jing-oln.html" target="_blank">TVボード　ジグ・ヌーボ</a><br />
<font color="#ff0000">幅1500cm　93,750円（税込）</font></span></td>
<td class="font_lbi"><a href="tv-board_t/mk-lamda.html" target="_blank">TVボード　ラムダ</a><br />
<font color="#ff0000">幅1800cm　117,150円（税込）</font></td>
<td><span class="font_lbi"><a href="tv-board_t/mk-raduni.html" target="_blank">TVボード　ラドゥーニ・ヌーボ</a><br />
<font color="#ff0000">幅2400cm　166,650円（税込）</font></span></td>
<td><span class="font_lbi"><a href="tv-board_t/mk-alb.html" target="_blank">TVボード　アルバ</a><br />
<font color="#ff0000">幅1800cm　114,400円（税込）</font></span></td>
</tr>
</table>
で良いのですかね？

[miyabi_pudding]

質問文に記載いただければ大丈夫です。
もう一点、
iframeで表示しているHTMLの中に、
table要素が入っている、ということでよろしいですか？？

[rikichi]

はい、上記のtableです。

[rikichi]

ありがとうございました。
只今苦戦中です。
同一ドメインです。
JavaScriptを探して貼り付けたのですが、今度は下が大きく空きました。
<script language="JavaScript" type="text/javascript">
function iframeResize(){
var PageHight = document.body.scrollHeight + 0; // ページの高さを取得
window.parent.document.getElementById('disp').style.height = PageHight + 'px'; // iframeの高さを変更
}
window.onload = iframeResize;
</script>
ご存じのソースが有りましたらご教示下さい。
お願いします。

[rikichi]

お世話になりました。
JavaScriptで解決致しました。
ありがとうございました。

[miyabi_pudding]

お、行けたのですね。
自解決の投稿をして、質問を閉じられるとよいかと。

Answer 1

java scriptで解決しました。
ありがとうございました。

Answer 2

基本的に、iframeは読み込んでいるHTMLの大きさを認識しないからです。
そのうえ、scrolling="no"を使っているため、iframe自体を記載しているHTMLのウィンドウ（もしくは、iframeの親要素）のサイズ以上の大きさがあった場合、スクロールができないため、切れるのは至極当然です。
つまり、今までは、サイズ的に表示できたが、表示内容が大きくなったため、見切れるようになった。
ということです。

読み込んでいるHTMLの中の要素の大きさを取得し、
iframeの大きさを変えれば行けるかと思います。
（もしくは内容が大きかったら、scrolling="yes"にするとか）
iframeで読み込んでいるHTMLや要素の大きさを取得するには、
JavaScriptを用いる必要があります。
しかも、クロスドメインでは、読み込み元のサーバーからのアクセス許可が必要になります。

Comments

[rikichi]

ありがとうございました。
只今苦戦中です。
同一ドメインです。
JavaScriptを探して貼り付けたのですが、今度は下が大きく空きました。
<script language="JavaScript" type="text/javascript">
function iframeResize(){
var PageHight = document.body.scrollHeight + 0; // ページの高さを取得
window.parent.document.getElementById('disp').style.height = PageHight + 'px'; // iframeの高さを変更
}
window.onload = iframeResize;
</script>
ご存じのソースが有りましたらご教示下さい。
お願いします。

[miyabi_pudding]

ソースコードはコメントではなく、質問本文に記載して下さい。