iframe 100% Höhe verursacht vertikale Bildlaufleiste

Ich versuche, layout-design, die eine Feste Höhe Kopfzeile am oberen Rand des Bildschirms, und dann in einem iframe unter nehmen den übrigen Raum. Die Lösung kam ich mit ist wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <style type="text/css"><!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--></style>
  </head>
  <body>
    <div style="height:70px;background-color:blue;"></div>
    <div style="position:absolute;top:70px;bottom:0;left:0;right:0;">
      <iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"></iframe>
    </div>
  </body>
</html>

Grundsätzlich, ich bin die Schaffung eines absolut positionierten div-unterhalb der Kopfzeile und die Größe es dauern, bis der rest des Raumes, dann setzen die volle Größe des iframe drin.

Das problem das ich laufen in ist, dass, wenn Sie fügen Sie den code genau so, wie unten zu sehen, mit XHTML Strict, in jedem browser (getestet w/chrome/safari/ie8), sehen Sie eine vertikale Bildlaufleiste mit ein paar Pixel für den Leerraum unterhalb der div.

Tun etwas Experimentieren, fand ich, dass, wenn ich entfernen Sie die doctype völlig es funktioniert in safari/chrome, aber IE kommt noch schlimmer, die Einstellung der iframe Höhe auf 300px oder so. Wenn ich den doctype auf transitional, es funktioniert in safari/chrome, hat aber das gleiche problem wie im strikten Fall für den IE8. Wenn ich den HTML5-doctype, es hat das gleiche problem wie strenge in allen Browsern.

Schließlich, wenn ich entfernen Sie den iframe in jedem dieser Fälle, ist alles gelegt Prima.

Jemand irgendwelche Ideen?

InformationsquelleAutor Keevon | 2010-05-25
  1. 5

    Hinzufügen von CSS body { overflow-y:hidden;}

    entfernt das vertikale scrollen. Wenn der iFrame-Inhalt überschreitet die Größe der Seite die das iframe-erhalten Sie eine Bildlaufleiste, statt von der Seite.

    • Danke, das war der trick! Nur aus Neugier, keine Ahnung warum der zusätzliche Inhalt wurde angezeigt? Konzeptionell wie es scheint, sollte alles passen in der Seite.
    • Ein IE ist wunderbar, padding/margin-bugs - ich bin mir sicher, dass...
    • Genial. Danke. Sie gab das fehlende puzzleteil in meinem lästige langwierige Suche, um zu versuchen, damit es funktioniert. Leider im IE 6 & 7 (weiß nicht, über IE 8) ich hatte noch benutzen IE nur, Stil: height:expression((document.body.offsetHeight - 25) + 'px');. Aber ich bin in Ordnung mit dieser. Firefox und andere Browser ignorieren diesen Stil. Zum Glück ist mein header-bar ist Feste Größe. Wenn nicht, müsste ich verwenden document.body.offsetHeight - document.getElementById('headerbar').offsetHeight oder so.
    • ja, aber dann bekommst du das problem, wo, wenn Sie text markieren und die Seite wird nach oben und unten scrollen. ärgerlich ist.
    • Ich bin nicht einverstanden, dies als eine Antwort, denn Sie kann noch will, eine Bildlaufleiste an, wenn der iframe wirklich übersteigt, die Verpackung div. Sie müssen entfernen Sie die Ursache der vorzeitigen Bildlaufleiste
    InformationsquelleAutor Daveo
Schreibe einen Kommentar