Rozciąganie ramki iframe w HTML5

Mam dwa pliki HTML, jeden zawiera drugi z ramką iframe i chcę, aby ta ramka była rozciągnięta na całej wysokości nadrzędnego html.Rozciąganie ramki iframe w HTML5

Więc pierwszy plik html (która ma czerwone tło) wyglądać tak:

<!DOCTYPE html> 
<html> 
<body style="background-color: red; margin: 0px; padding: 0px;"> 
    <iframe src="Blue.html" frameborder="0" scrolling="no" height="100%" width="100%" /> 
</body> 
</html>

Drugi (który ma niebieskie tło):

<!DOCTYPE html> 
<html>  
<body style="background-color: blue;" /> 
</html>

Jeśli wszystko jest poprawne Spodziewam aby zobaczyć tylko niebieskie tło, ponieważ element iframe powinien nakładać się na całą stronę nadrzędną, ale widzę tylko pasek koloru niebieskiego i cały czerwony ..

Z typem dokumentu HTML5 <!DOCTYPE html> I nie wydają się być coraz poprawny wynik:

With HTML5 DOCTYPE

Jeśli usunąć DOCTYPE HTML5 mogę uzyskać wynik chcę. Myślę, że to dlatego, że będzie to uczynić HTML w trybie quirks:

Without HTML5 DOCTYPE

chcę doctype HTML chociaż, tak jak można to naprawić? Dzięki za spojrzenie!

Źródło

2011-08-10 Arcturus

robię to z moim [W3 Viewer] (http://w3viewer.com). Sztuką jest umieszczenie IFRAME w DIV. Następnie ustaw DIV tak, aby obejmował całą stronę i ustaw "width: 100%; height: 100%; 'w IFRAME. –

CSS:

#wrap { position:fixed; left:0; width:100%; top:0; height:100%; } 
#iframe { display: block; width:100%; height:100%; }

HTML:

<div id="wrap"> 
    <iframe src="..." frameborder="0" id="iframe"></iframe> 
</div>

żywo demo:http://jsfiddle.net/5G5rE/show/

Źródło

2011-08-10 13:39:44

Proszę wyjaśnić, dlaczego tak się dzieje i jak pozycja: naprawiono problem? Dziękuję Ci! – Jay

@Jay OP ustawił wysokość IFRAME na 100%. Odsetek ten dotyczy bloku zawierającego - w tym przypadku elementu BODY. Jednak wysokość elementu BODY domyślnie zależy od wysokości jego zawartości. Jest to zależność cykliczna - wysokość BODY zależy od wysokości IFRAME i odwrotnie. To oczywiście nie zadziała. Można ustawić wysokość elementów BODY i HTML na 100% - to by działało. Preferuję stałe pozycjonowanie - jest bardziej elastyczne (można precyzyjnie określić zarówno pozycję, jak i wymiary). –

Dziękuję Šime Vidas za wyjaśnienie! – Jay

Rozciąganie ramki iframe w HTML5

Odpowiedz

Powiązane problemy