web-dev-qa-db-ja.com

iFrame Height Auto（CSS）

Iframeに問題があります。 iframe内のコンテンツに応じて、フレームの高さを自動的に調整したいのです。私は本当にJavaScriptなしでCSSを介してこれをやりたいです。ただし、もしあればJavaScriptを使用します。

私はもう試した height: 100%;およびheight: auto;など。他に何を試すべきかわからない！

これが私のCSSです。フレーム用...

#frame {
  position: relative;
  overflow: hidden;
  width: 860px;
  height: 100%;
}

そして、フレームのページに。

#wrap {
  float: left;
  position: absolute;
  overflow: hidden;
  width: 780px;
  height: 100%;
  text-align: justify;
  font-size: 16px;
  color: #6BA070;
  letter-spacing: 3px;
}

ページのコーディングは次のようになります...

<!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" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
  <div id="container">    
    <div id="header">
    </div>

  <div id="navigation"> 
    <a href="/" class="navigation">home</a>
    <a href="about.php" class="navigation">about</a>
    <a href="fanlisting.php" class="navigation">fanlisting</a>
    <a href="reasons.php" class="navigation">100 reasons</a>
    <a href="letter.php" class="navigation">letter</a>
  </div>
  <div id="content" >
    <h1>Update Information</h1>
    <iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
  </div>
  <div id="footer">
  </div>
</div>
</body>
</html>

Iframe内のURLは、iframeが表示されるWebサイトとは異なることに注意してください。ただし、両方のWebサイトにアクセスできます。

誰でも助けることができますか？

htmlcssiframeheight
29
SweetSpice

私はこれと同じ問題を抱えていましたが、次のことがうまくいくことがわかりました。

レスポンシブなYouTube埋め込みを作成する鍵は、パディングとコンテナ要素を使用することです。これにより、固定のアスペクト比を与えることができます。スライドショーなど、他のほとんどのiframeベースの埋め込みでもこの手法を使用できます。

幅と高さを固定した典型的なYouTube埋め込みコードは次のとおりです。

 <iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw" 
 frameborder="0" allowfullscreen></iframe>

幅を100％にすればいいのですが、高さが固定されているため機能しません。あなたがする必要があるのは、そのようにコンテナにラップすることです（クラス名と幅と高さの削除に注意してください）：

 <div class="container">
 <iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
 frameborder="0" allowfullscreen class="video"></iframe>
 </div>

そして、次のCSSを使用します。

 .container {
    position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 56.25%;
 }
 .video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

ここに私が解決策を見つけたページがあります：

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

アスペクト比に応じて、おそらくpadding-bottom: 56.25%;高さを正しく取得します。

26
Ryan

これが私の純粋なCSSソリューションです:)

追加し、はいをiframeにスクロールします。

<iframe src="your iframe link" width="100%" scrolling="yes" frameborder="0"></iframe>

トリック ：）

<style>
    html, body, iframe { height: 100%; }
    html { overflow: hidden; }
</style>

応答性について心配する必要はありません:)

4
Benjoe

@SweetSpice、相対の代わりに絶対として位置を使用します。それが動作します

#frame{
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
}
1
Paritosh

hjpotter92

これをセクションに追加します。

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

Iframeをこれに変更します：

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

掲載されています ここ

ただし、JavaScriptを使用しますが、問題を解決するためのシンプルで使いやすいコードです。

1
Casper Spruit
 <div id="content" >
    <h1>Update Information</h1>
    <div id="support-box">
        <div id="wrapper">
            <iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
        </div>
    </div>
  </div>
 #support-box {
        width: 50%;
        float: left;
        display: block;
        height: 20rem; /* is support box height you can change as per your requirement*/
        background-color:#000;
    }
    #wrapper {
        width: 90%;
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
         background:#ddd;
       margin:auto;
       height:100px; /* here the height values are automatic you can leave this if you can*/

    }
    #wrapper iframe {
        width: 100%;
        display: block;
        padding:10px;
        margin:auto;
    }

https://jsfiddle.net/umd2ahce/1/

0
Immran Mohammed

absolute位置と希望する高さを使用する必要があります。 CSSで、次を実行します。

#id-of-iFrame {
    position: absolute;
    height: 100%;
}
0
Peter Soxx