wake-up-neo.net

iFrame Height Auto (CSS)

Ich habe Probleme mit meinem Iframe. Ich möchte wirklich, dass der Rahmen die Höhe automatisch an den Inhalt im iframe anpasst. Ich möchte dies wirklich über die CSS ohne Javascript tun. Ich werde jedoch Javascript verwenden, wenn ich auch habe.

Ich habe height: 100%; und height: auto; usw. ausprobiert. Ich weiß einfach nicht, was ich sonst noch probieren soll!

Hier ist mein CSS. Für den Rahmen ...

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

Und dann zur Seite des Rahmens.

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

Die Codierung der Seite sieht so aus ...

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

Bitte beachten Sie, dass sich die URL im iframe von der Website unterscheidet, auf der der iframe angezeigt wird. Ich habe jedoch Zugriff auf beide Websites.

Kann jemand helfen?

25
SweetSpice

Ich hatte das gleiche Problem, fand aber Folgendes, das gut funktioniert:

Der Schlüssel zum Erstellen eines responsiven YouTube-Embeds liegt in der Auffüllung und einem Containerelement, mit dem Sie ein festes Seitenverhältnis festlegen können. Sie können diese Technik auch mit den meisten anderen iframe-basierten Einbettungen wie Diashows verwenden.

Ein typischer YouTube-Einbettungscode mit fester Breite und Höhe sieht folgendermaßen aus:

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

Es wäre schön, wenn wir ihm nur eine Breite von 100% geben könnten, aber es funktioniert nicht, da die Höhe unverändert bleibt. Was Sie tun müssen, ist es so in einen Container zu packen (beachten Sie die Klassennamen und Entfernung der Breite und Höhe):

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

Und verwende folgendes CSS:

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

Hier ist die Seite, auf der ich die Lösung gefunden habe:

https://www.h3xed.com/web-development/wie-sich-nach-responsive-100-width-youtube-iframe-embed

Abhängig von Ihrem Seitenverhältnis müssen Sie wahrscheinlich den padding-bottom: 56.25%; anpassen, um die richtige Höhe zu erhalten.

23
Ryan

Dies ist meine PURE CSS-Lösung :)

Fügen Sie hinzu, und klicken Sie in Ihrem iframe auf Ja.

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

Der Trick :)

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

Sie müssen sich nicht um die Reaktionsfähigkeit sorgen :)

3
Benjoe

hjpotter92

Fügen Sie dies Ihrem Abschnitt hinzu:

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

Und ändern Sie Ihren iframe so:

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

Es wird geschrieben Hier

Es verwendet jedoch Javascript, aber es ist einfach und einfach, Code zu verwenden, um Ihr Problem zu beheben.

1
Casper Spruit

@SweetSpice, verwenden Sie die Position als absolut anstelle des Relativen. Es wird klappen

#frame{
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
}
0
Paritosh
 <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

Sie müssen die absolute-Position zusammen mit der gewünschten Höhe . In Ihrem CSS verwenden.

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