iFrameは100％の高さに拡大しません

私はこれをhtml以下にしています。そして、残っているものは何でも100％で画面の残りの部分をカバーするようiFrameに欲しい。私は高さ属性で "100％"と "*"を試しましたが、動作しませんでした。何故ですか？おかげiFrameは100％の高さに拡大しません

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    </head> 
    <body> 
     <div id="container-frame"> 
      <img id="if-logo" height="35" width="84" alt="Kucku" src="/Content/Images/logo.gif"/> 
      <img id="if-avatar" height="30" width="30" alt="Avatar" src="http://web.kucku.vn/Content/Images/Avatars/default_profile_bigger.png"/> 
      <a id="if-username" href="/nvthoai">nvthoai</a> 
      <div id="if-box"> 
      </div> 
      <a id="if-close" href="http://www.yahoo.com" target="_top"> </a> 
      <div id="if-link"> 
      </div> 
      <div id="if-star"> 
      </div> 
     </div> 
     <iframe id="mainFrame" frameborder="no" width="100%" title="mainFrame" framespacing="0" border="0" name="mainFrame" src="http://www.yahoo.com" style="display: block; width: 100%; float: left; height: 100%;"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      </html> 
     </iframe> 
    </body> 
</html> 



#container-frame { 
background:#E1E1E1 url(../images/if_bg.gif) repeat-x scroll 0 0; 
height:35px; 
width:100%; 
}

出典

2009-08-12 HP.

高さが100％の理由は、親が明示的（高％でない）の高さを持たない子供には高さの高さが機能しないためです。だから、これは動作しません：

parent { 
    height: 60%; 
} 

child { 
    height: 100%; 
}

を、これが行いながら：

parent { 
    height: 60em; 
} 

child { 
    height: 100%; 
}

子供はどのような60％の手段を知らないので、代わりにそれは高さとなり：オート（高さは、その内部の静的コンテンツによって決定します）。

子供は、60emやその他の明示的な単位の％を把握する方法を知っています。

このルールにはいくつかの例外があります。 1つは、html要素とbody要素の両方にheight：100％が指定されている場合、直接の子に対してheight：100％またはmin-height：100％を使用できます。（あなたは高みを試すことができますが、Patが示唆したように96％を試すことができますが、これは画面/ブラウザの高さごとに全く異なる値になることを知っています。 iframeと＃container-frameの2つの直接の子があります。

ビューポートの上部に＃container-frameを配置することができます（これはページの残りの部分に置くことができ、「上」は「z軸上でユーザーに近い」という意味です）。 iframeが100％の高さに設定されていないが、おそらくPatの例、96％などのようにiframeにいくつかの上部のパディングを付けて＃container-frameのビジュアルルームを作ることができます。そうしないと、iframeの上部が＃container-frameによって覆い隠され、人々が上部を見逃すことになります。 100％の高さのボックスに上部または下部のマージン、パディング、ボーダーなどを追加できないことをご存じですか？それはあなたに100％以上の何かを与えるでしょう！

％heightルールのもう1つの例外は、絶対配置された要素全体です。彼らはIE6にこれに関する問題があることを除けば、高さも％の可能性があります。あなたがIE6のハッキングに気をつけていない場合や、IE6について気にしない場合は、両方の直接の子供たちが働くことができます。一般的に、私はページ上のすべてのものを配置するのが好きではありませんが、このような場合には最も簡単かもしれません。

出典

2009-08-12 11:54:03

これはどのように幅：100％が機能するのかを説明していますか？ – Brabbeldas

@Brabbeldas幅と高さは本質的に異なっています。これは私の最初の推測ではありませんが、ブラウザはページの全幅（ビューポートの制限または明示的な幅広い設定）を決定する能力を持っていますが、必要に応じて高さが増加するため、ブラウザは100％の意味を知ることができません –

このCSSはあなたのためにトリックを行う必要があります。

body { 
    margin: 0; 
    padding: 0; 
    overflow-y: hidden; 
}

その後96％までのiframeの高さを設定します。これにより、ページの下部に押し込まれなくなります。

これは、iframeの高さが100％で、使用可能な画面の高さの100％として計算されるためです。 iframeの上に35ピクセルの高さのdivがあるため、合計画面の高さを35ピクセル超えたiframeで終了します。

出典

2009-08-12 03:04:20 Pat

私はまだ問題があります。あなたがそれを見たいのであれば、ウェブサイトはここにあります。http://web.kucku.vn/u/D –

はい、これは私のために働いていました。私のmain.htmlには、navigate.htmlとcontent.htmlという2つのフレームがあります。私はmain.html本体のスタイリングに上記CSSを使用していました。 – msinfo

-1

あなたは<object>代わりの

例使用して簡単に試すことができます：ほとんどの人がセキュリティ上の目的のために、（オブジェクトまたはインラインフレームを使用して）、フレーミングのいずれかの種類を使用しないことをお勧めしますことを

<object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>

注意を。

更新

は、私が忘れてしまいました！また、ボディロード後に実行されるjavascript関数を使用してiFrameを動的に調整する方法もあります。非常に良い例がありますhere.

出典

2009-08-12 13:21:39

iFrameは100％の高さに拡大しません

答えて

関連する問題