Machen Sie eine Iframe füllen am unteren Rand des Bildschirms ohne Verwendung von Tabellen

Ich möchte eine Kopfzeile mit beliebigen Inhalt über einem iframe anzeigen, die den Rest des Bildschirms einnimmt. Ich habe es geschafft, diese Arbeiten mit Tabellen erhalten mit dem folgenden:Machen Sie eine Iframe füllen am unteren Rand des Bildschirms ohne Verwendung von Tabellen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style> 
html, body, iframe, table, tr, td { 
    margin: 0; padding: 0; 
} 
html, body, iframe, table, #content { 
    height: 100%; width: 100%; 
} 
table { 
    border-collapse: collapse; 
} 
iframe { 
    border: 0; 
} 
</style> 
</head> 
<body> 
    <table> 
    <tr><td> 
     <div id="header"> 
     <p>some arbitrary stuff in a header</p> 
     <p>this is sized dynamically</p> 
     <p>it's not a fixed size</p> 
     </div> 
    </td></tr> 
    <tr><td id="content"> 
     <iframe src="http://www.bing.com/search?q=stackoverflow" /> 
    </td></tr> 
    </table> 
</body> 
</html>

, die in Firefox und Chrome funktioniert, aber nicht IE7 (ich weiß nicht, warum). Ohne die Verwendung von Tabellen, das ist die nächste, die ich bekommen konnte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style> 
html, body { 
    margin: 0; padding: 0; 
    height: 100%; 
} 
iframe { 
    margin: 0; padding: 0; 
    width: 100%; 
    border: 0; 
} 
</style> 
</head> 
<body> 
    <div id="header"> 
    <p>some arbitrary stuff in a header</p> 
    <p>this is sized dynamically</p> 
    <p>it's not a fixed size</p> 
    </div> 
    <iframe src="http://www.bing.com/search?q=stackoverflow" /> 
</body> 
</html>

Dies ist das gleiche in allen Browsern aussieht, aber der iframe ist zu kurz. Wenn ich jedoch seine Höhe auf 100% setze, wird es so groß wie der Bildschirm und es erscheinen 2 Bildlaufleisten (das gleiche wie IE7 in der Tabellenversion). Ich möchte, dass der Iframe den verbleibenden Platz im Browserfenster einnimmt, aber nicht mehr. Ich möchte lieber nicht auf Javascript zurückgreifen.

Quelle

2009-06-06 dmnd

This sieht aus, als was Sie brauchen. Sehen Sie sich den Quellcode für weitere Informationen an.

Quelle

2009-06-07 08:47:46 Javache

Das funktioniert nicht. Setzen Sie den iframe in den Inhalt mit nichts anderem und Sie enden mit einem kleinen Streifen von iframe an der Spitze des Browsers. – dmnd

Warum nicht nur alte Mode, normale Rahmen dann verwenden? Der Sinn eines iFrames ist, dass es sich nicht über das ausdehnt, was ein normales Element wäre.

Quelle

2009-11-13 19:21:54

Ich brauche den oberen Rahmen, um die Größe dynamisch anzupassen, um den Inhalt darin zu passen. – dmnd

Versuchen Sie, die folgende JavaScript-Funktion

<script language="javascript"> 
function adjust_iframe(oFrame) 
{ 
    if(!oFrame) return; 

    var win_height; 
    var frm_height;  

    // Get page height Firefox/IE 
    if(window.innerHeight) win_height = window.innerHeight; 
else if(document.body.clientHeight) win_height = document.body.clientHeight; 

    // Dtermine new height 
    frm_height = win_height - oFrame.offsetTop - 15; // replace 15 accordingly 

    // Set iframe height 
    oFrame.style.height = frm_height + "px"; 
} 
</script>

Beachten Sie, dass Sie es zu einem bestimmten Zeitpunkt nennen müssen (zB Onload), wie:

<body onload="adjust_iframe(document.getElementById('myiframe'));">

Quelle

2009-11-26 10:09:37

Ich habe im Moment etwas Ähnliches implementiert. Aber der Punkt der Frage ist, es ohne Javascript zu machen. – dmnd

Ich glaube nicht das CSS-Box Modell hat das Konzept des verfügbaren vertikalen Raumes.

Quelle

2009-12-05 00:59:45 Neil

Dies funktioniert, den Raum zu füllen:

iframe { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 800px; (Whatever the height of your content is) 
    border: 0; 
}

Quelle

2010-12-13 18:26:46

Machen Sie eine Iframe füllen am unteren Rand des Bildschirms ohne Verwendung von Tabellen

Antwort

Verwandte Themen