CSS Höhe 100% verhält sich anders, wenn in Iframe eingebettet

JSFiddle: https://jsfiddle.net/570qvk2p/1/CSS Höhe 100% verhält sich anders, wenn in Iframe eingebettet

Ich habe ein Dritt html-Dokument, das ich in einem Iframe bin einbetten. Innerhalb dieses Dokuments gibt es ein Element mit einer CSS-Regel, die die Höhe angibt: 100%; Ein Elternteil einige Stufen den Baum hat eine feste Höhe.

Wenn das Drittanbieter-HTMLDocument in seiner ursprünglichen Form gerendert wird, nimmt das Element mit 100% Höhe eine Größe von 18px an (passend zum Inhalt). Beim Rendern in einem Iframe nimmt das Element die Größe des übergeordneten Elements mit fester Höhe (200 Pixel) an.

Warum funktioniert die Größenanpassung innerhalb des iframe anders und wie kann ich dem entgegenwirken?

Im Folgenden ist der HTML, die Sie von der Geige anders gestylt endet sehen können, wenn sie in einem Iframe vs eingeführt, wenn sie in der obersten Ebene Dokument eingefügt:

<div style="height: 200px;"> 
    <ul style="display:block;"> 
    <li> 
     <div style="height: 100%;">1</div> 
    </li> 
    <li> 
     <div style="height: 100%;">2</div> 
    </li> 
    <li> 
     <div style="height: 100%;">3</div> 
    </li> 
    </ul> 
</div>

Diese Frage: Element in iframe with height: 100% strech beschreibt die gleiche Phänomen, aber dieser spezielle Fall ist für mich lösbar, indem ich eine Größe auf dem html-Tag festlege, bevor ich auf die iframe-Größe zurückgreife. Was ich oben zeige, scheint ein allgemeinerer Fall desselben Problems zu sein, das von dieser Person beschrieben wird.

Quelle

2016-11-30 user7230402

Ihr Iframe hat keine doctype, die die Renderprobleme verursacht.

Constructing Ihre iframe mit einer definierten Doctype gibt konsistentes Rendering zwischen Ihrer Seite und iframe:

var doc = window.frames[0].document; 

var a = doc.createElement("div"); 
var b = document.createElement("div"); 
var content = "<div style=\"height: 200px;\"><ul style=\"display:block;\"><li><div style=\"height: 100%;\">1</div></li><li><div style=\"height: 100%;\">2</div></li><li><div style=\"height: 100%;\">3</div></li></ul></div>"; 

doc.open(); 
doc.write("<!DOCTYPE html>"); 
doc.write("<html>"); 
doc.write("<head></head>"); 
doc.write("<body>" + content + "</body>"); 
doc.write("</html>"); 
doc.close(); 

b.innerHTML = content; 
document.body.appendChild(b);

Updated jsfiddle

Ich hatte den Eindruck, dass ein iframe den Doctype der übergeordneten Seite geerbt, aber dieses doesn scheint nicht der Fall zu sein. Vielleicht kann jemand anders es ausarbeiten?

Quelle

2016-11-30 12:54:55 Turnip

Sie scheinen in Bezug auf das von mir angebotene Beispiel korrekt zu sein, was großartig ist! Es hat mich in die richtige Richtung geführt. Auf dem realen DOM, mit dem ich arbeite, gibt es jedoch einen Doctype , der mit document.implementation.createDocumentType erzeugt wird und eindeutig erfolgreich an das Dokument angehängt wird. Jedoch bleibt document.doctype null. Irgendwelche Ideen, warum das sein könnte? – user7230402

Keine Ahnung um ehrlich zu sein. Hoffentlich kommt jemand anderes, der dir helfen kann. Viel Glück! – Turnip

'let newtype = document.implementation.createDocumentType ('html', '', ''); \t \t \t window.iframe.document.insertBefore (neuer Typ, window.iframe.document.documentElement); ' – hipkiss

CSS Höhe 100% verhält sich anders, wenn in Iframe eingebettet

Antwort

Verwandte Themen