Wird die iFrame-Höhe = 100% in allen Browsern unterstützt?
Ich verwende doctype als:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Wenn ich in meinem iframe-Code sage:
<iframe src="xyz.pdf" width="100%" height="100%" />
Ich meine, wird es tatsächlich die Höhe der verbleibenden Seite annehmen (da sich oben ein weiterer Frame mit fester Höhe von 50px befindet) .__ Wird dies in allen gängigen Browsern (IE/Firefox/Safari) unterstützt?
Auch in Bezug auf Bildlaufleisten, auch wenn ich scrolling="no"
sage, sehe ich deaktivierte Bildlaufleisten in Firefox ... Wie kann ich Bildlaufleisten vollständig ausblenden und die Höhe des Iframes automatisch einstellen?
Sie können Frameset als vorherigen Antwortstatus verwenden. Wenn Sie jedoch auf die Verwendung von iFrames bestehen, sollten die beiden folgenden Beispiele funktionieren:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
Eine Alternative:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
So blenden Sie das Scrollen mit 2 Alternativen aus:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
Hack mit dem zweiten Beispiel:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
Um die Bildlaufleisten des iFrame auszublenden, wird das übergeordnete Element overflow: hidden
zum Ausblenden der Bildlaufleisten und der iFrame bis zu 150% Breite und Höhe verwendet, wodurch die Bildlaufleisten außerhalb der Seite gezwungen werden. Bars kann man nicht erwarten, dass der iframe die Grenzen der Seite überschreitet. Dadurch werden die Bildlaufleisten des iFrame mit voller Breite ausgeblendet!
iframe
:In unterstützten Browsern können Sie Viewport-Prozentsatzlängen verwenden, z. B. height: 100vh
.
Dabei steht 100vh
für die Höhe des Ansichtsfensters und 100vw
für die Breite.
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
<iframe></iframe>
Dieser Ansatz ist ziemlich unkompliziert. Legen Sie einfach die Position des fixed
-Elements fest und fügen Sie einen height
width
des 100%
hinzu.
iframe {
position: fixed;
background: #000;
border: none;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
}
<iframe></iframe>
Für diese letzte Methode setzen Sie einfach die height
der body
html
/iframe
Elemente auf 100%
.
html, body {
height: 100%;
margin: 0; /* Reset default margin on the body element */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
width: 100%;
height: 100%;
}
<iframe></iframe>
1. Ändern Sie Ihren DOCTYPE auf etwas weniger strenge. Verwenden Sie kein XHTML. Es ist dumm. Verwenden Sie einfach den HTML 5-Doctype und Sie sind gut:
<!doctype html>
2. Möglicherweise müssen Sie (abhängig vom Browser) sicherstellen, dass das übergeordnete Element des iframe eine Höhe hat. Und sein Elternteil. Und sein Elternteil. Usw:
html, body { height: 100%; }
Ich stieß auf das gleiche Problem, ich zog einen iframe in ein div. Versuche dies:
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
Die Höhe ist auf 100 Vh eingestellt, was für die Höhe des Ansichtsfensters steht. Die Breite kann auch auf 100 vw festgelegt werden. Wenn die Quelldatei darauf anspricht (Ihr Frame wird dadurch sehr breit), treten möglicherweise Probleme auf.
Das hat für mich sehr gut funktioniert (nur wenn iframe-Inhalte von der gleichen Domain stammen):
<script type="text/javascript">
function calcHeight(iframeElement){
var the_height= iframeElement.contentWindow.document.body.scrollHeight;
iframeElement.height= the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
<iframe></iframe>
Zusätzlich zu der Antwort von Akshit Soota: Ist es wichtig, die Höhe jedes übergeordneten Elements sowie der Tabelle und column explizit festzulegen, falls vorhanden:
<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">
<table style="width: 100%; height: 100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left" height="100%">
<iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;"
width="100%" height="100%" frameborder="0" scrolling="no"
src="http://www.youraddress.com" ></iframe>
</td>
Sie fügen zuerst Css hinzu
html,body{
height:100%;
}
Dies wird das HTML sein:
<div style="position:relative;height:100%;max-width:500px;margin:auto">
<iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
Gemäß https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe sind prozentuale Werte nicht mehr zulässig. Aber das folgende hat für mich funktioniert
<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>
Obwohl width:100%
funktioniert, funktioniert height:100%
nicht. Also wurde window.innerHeight
verwendet. Sie können auch CSS-Pixel für die Höhe verwenden.
Hier ist ein kurzer Code. Es verwendet jedoch eine Jquery-Methode, um die aktuelle Fensterhöhe zu ermitteln. Beim Laden von iFrame wird die Höhe des Iframes gleich dem aktuellen Fenster eingestellt. Zum Ändern der Seitengröße verfügt das body-Tag über einen Onresize-Ereignishandler, der die Höhe des Iframes festlegt, wenn die Dokumentgröße geändert wird.
<html>
<head>
<title>my I frame is as tall as your page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
<iframe id="iframe1" src="yourpage.html" style="width:100%;" onload="this.height=$(window).height();"></iframe>
</body>
</html>
hier ist ein Arbeitsprobe: http://jsbin.com/soqeq/1/
Folgendes getestetes Arbeiten
<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
Nur das hat für mich funktioniert (aber für "Same-Domain"):
function MakeIframeFullHeight(iframeElement){
iframeElement.style.width = "100%";
var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height ); // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
if(margins=="") { margins=0; ifrD.body.style.margin="0px"; }
(function(){
var interval = setInterval(function(){
if(ifrD.readyState == 'complete' ){
iframeElement.style.height = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
setTimeout( function(){ clearInterval(interval); }, 1000 );
}
},1000)
})();
}
sie können entweder verwenden:
MakeIframeFullHeight(document.getElementById("iframe_id"));
oder
<iframe .... onload="MakeIframeFullHeight(this);" ....
Dies ist eine großartige Ressource und hat sehr gut funktioniert, die wenigen Male, in denen ich sie verwendet habe. Erzeugt den folgenden Code ....
<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
iframe
:viewport
-Bereich, wenn die Seite geladen wirdSchöner Ansatz für Landing Pages mit Video oder eingebetteten Inhalten. Unterhalb des eingebetteten Videos können Sie zusätzlichen Inhalt anzeigen, der beim Blättern nach unten angezeigt wird.
CSS- und HTML-Code.
body {
margin: 0;
background-color: #E1E1E1;
}
header {
width: 100%;
height: 56vw;
max-height: 100vh;
}
.embwrap {
width: 100%;
height: 100%;
display: table;
}
.embwrap .embcell {
width: auto;
background-color: black;
display: table-cell;
vertical-align: top;
}
.embwrap .embcell .ifrwrap {
height: 100%;
width: 100%;
display: inline-table;
background-color: black;
}
.embwrap .embcell .ifrwrap iframe {
height: 100%;
width: 100%;
}
<header>
<div class="embwrap">
<div class="embcell">
<div class="ifrwrap">
<iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&modestbranding=1&iv_load_policy=3&showsearch=0&rel=1&controls=1&showinfo=1&fs=1"></iframe>
</div>
</div>
</div>
</header>
<article>
<div style="margin:30px; text-align: justify;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
<p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
</div>
</article>