CSS VH-Einheiten in einem Iframe

Ich versuche CSS vh Einheiten innerhalb eines Iframe zu verwenden. Ich finde, dass sie irgendwie auf die Größe des iframe skaliert sind. Mit anderen Worten, 100vh ist nicht die Fensterhöhe. Es ist auf die Höhe des Iframes eingestellt.CSS VH-Einheiten in einem Iframe

Scheint das richtig?

Gibt es eine Problemumgehung?

Quelle

2015-12-03 in code veritas

Verwenden Sie Javascript dafür. Überprüfen Sie 'window.innerWidth' und' window.innerHeight'. – www139

Ist der Iframe auf derselben Domain? – www139

Können Sie uns etwas antun? – www139

weiß ich, das eine alte Frage, aber da die Menschen in Richtung der vh Einheit bewegen, wird diese Frage viel häufiger geworden.

Um zu verdeutlichen, hier ist ein Beispiel für das Problem. Wir haben eine HTML-Datei, die eine iframe lädt:

<!DOCTYPE html> 
<html> 
<head></head> 
<style> 
iframe { 
    height: 50vh; 
    width: 100%; 
} 
</style> 
<body> 
    <iframe src="iframe.html"/> 
</body> 
</html>

Und seine iframe:

<!DOCTYPE html> 
<html> 
<head></head> 
<style> 
div { 
    height: 50vh; 
    width: 100%; 
    background: blue; 
} 
</style> 
<body> 
    <div></div> 
</body> 
</html>

Wichtig ist hierbei zu beachten ist, dass sowohl die iframe und das iframe'sdiv Element bezeichnet werden als eine Höhe von 50vh. Das beabsichtigte Verhalten kann sein, dass die iframe die Ansichtsfensterhöhe oder -breite des übergeordneten Kontexts berücksichtigt. Stattdessen sieht das Ergebnis wie folgt aus:

Das heißt, die Höhe des blauen Elements ist ~ 25% des Browserfensters, statt der erwarteten 50% (100% des iframe). Obwohl wir wünschen, dass die iframe das Ansichtsfenster des übergeordneten Elements respektiert, macht dieses Beispiel einen guten Beweis dafür, wie unintuitiv das sein könnte, obwohl es die v* Einheiten wertvoller machen würde, da der Inhalt iframe ist. Das Problem muss reichen mit wie Höhe des Ansichtsfensters bestimmt wird.

Von the spec:

Ansichtsfenster prozentiger Längen sind in Bezug auf die Größe des anfänglichen umschließenden Blocks. Wenn die Höhe oder Breite des ursprünglichen umschließenden Blocks geändert wird, werden sie entsprechend skaliert.

Sowohl ein iframe und das Browser-Fenster kann die initial containing block sein, da sie beide gültig Ansichtsfenster sind. Ein Ansichtsfenster ist nicht auf das Browserfenster beschränkt, sondern stattdessen als ein Fenster oder ein anderer Anzeigebereich auf dem Bildschirm definiert, über den Benutzer ein Dokument einsehen können.

Ein iframe erstellt einen nested browsing context, wenn er in ein Dokument eingefügt wird, und hat somit sein eigenes Ansichtsfenster.

Also ja, das ist das beabsichtigte Verhalten - und leider gibt es keine reine CSS-Problemumgehung - jedoch hat www139 ein Beispiel dafür geliefert, wie dies mit JavaScript erreicht werden kann. Das Problem damit beginnt, wenn viele Elemente Größe mit v* Einheiten gesteuert werden.

Quelle

2017-06-19 15:23:39

Dies ist eine ausgezeichnete Frage. Leider konnte ich noch keine Lösung in CSS finden, aber ich konnte eine Lösung in JavaScript finden, die meiner Meinung nach die beste Lösung ist. Denken Sie daran, dass die Frames auf derselben Domäne sein müssen, damit dies funktioniert.

Hoffe, das hilft. Wenn diese Antwort verbessert werden muss, bitte Kommentar unten :-)

window.addEventListener('load',function(){ 
    initializeV(); 
    function initializeV(){ 
      //1% of the parent viewport width (same as 1vw): 
      var vw = window.parent.innerWidth/100; 
      //1% of the viewport height (same as 1vh): 
      var vh = window.parent.innerHeight/100; 

      //assign width and height to your v unit elements here 
    } 

    window.parent.addEventListener('resize',function(){ 
      //when the browser window is resized; recalculate 
      initializeV(); 
    }); 
});

Quelle

2015-12-03 05:25:29 www139

@JamieCounsell \t Was bedeutet "// width und width hier Ihren v-Unit-Elementen zuweisen"? Wie mache ich das? Könnten Sie bitte ein Beispiel geben? Dank –

@SamGurdus werden CSS-Eigenschaften mit JavaScript festgelegt. Zum Beispiel wird 'document.getElementById (" test "). Style.width = 10 * vw + 'px';' die Breite des Elements #test auf 10% (oder 10vw) der Breite des Ansichtsfensters setzen. – www139

Ich habe einen anderen iFrame innerhalb des iFrame, und ich denke, das bricht es. Hier ist der Code des Haupt-Iframes. https://jsfiddle.net/samgurdus/o3vkhp5o/ –

CSS VH-Einheiten in einem Iframe

Antwort

Verwandte Themen