0

ページをロードするために iframe を挿入した div を含むサイト デザインがあります。
header stays at top well
footer stays at bottom very well
content stays at the middle well too

しかし、iframe はコンテナーの高さいっぱいまで伸びていません。i have not mentioned height in pixels in the style

しかし、私が書いたとき

iframe {
  margin:0;
  padding:0;
  min-height:72%;
  width:100%;
  background-color:#ddd;
}

HTML

<div id="container">
  <div id="header"> blah blah </div>
  <div id="content">
      <div id="menu"> some code of menu </div>
      <div id="iframeDiv" class="contentdiv">
         <iframe src="#" id="#" width="100%"></iframe>
      </div>
  </div>
  <div id="footer">blah blah</div>
</div>

CSS

html, body {
 margin:0; padding:0; height:100%; width:100%;
}
iframe {
margin:0; padding:0; height:72%; width:100%;
}
#container {
min-height:100%; position:relative; width:100%;
}
#content {
  padding:10px; padding-bottom:30px;
}

#iframeDiv のスタイルを書いてみましたが、何もうまくいかないようです!

フッターまで伸びましたが、これはクロムでのみ機能します。つまり、背景色も感知していません。firefox は背景色を表示しましたが、72% に引き伸ばされませんでした。すべてのブラウザで iframe の高さを 72% に伸ばす方法。? ここに画像の説明を入力 ここに画像の説明を入力

4

2 に答える 2

1

HTML ページの DOCTYPE を確認し、HTML および BODY タグに CSS を追加してみてください。

html, body {
    height: 100%;
}
于 2013-05-11T11:18:33.230 に答える