iframe auf 100% Höhe
Jens Schärer
- html
Hallo,
ich habe folgendes Problem: ich habe eine 3-Teilige Webseite, oberster Teil ist ein <div> mit einem Eingabefeld, darunter zwei, per float nebeneinander angeordnete, iframes, welche möglichst den Rest der Seite ausnutzen sollen, sprich 100% der verbleibenden Höhe im Browser nutzen sollen.
Alle Versuche mit Stylesheets die Höhe auf 100% zu setzen, als auch den Body mit height und width 100% zu setzen schlugen fehl. Irgendjemand eine Idee?
Liebe Grüße,
Jens
So nur mit rein HTML / CSS hab ichs auch nicht hingekriegt (Browser übergreifend)
Fals Javascript in Frage kommt:
function screenHeight() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
// window.alert( 'Width = ' + myWidth );
// window.alert( 'Height = ' + myHeight );
return myHeight;
}
Funktioniert sehr zuverlässig, der rückgabewert ist die fensterhöhe.
Das unschöne daran ist das das iframe nicht automatisch mitskaliert bei einer grössen änderung des browserfensters, lässt sich aber auch "beheben":
window.onresize = function()
{
// grösse des iframes anpassen etwa mit
document.getElementById('meineirahmen').style.height = screenHeight();
};
keine schöne lösung, aber funktioniert. an einer "sauberen" lösung wär ich auch intressiert.
Hallo,
Alle Versuche mit Stylesheets die Höhe auf 100% zu setzen, als auch den Body mit height und width 100% zu setzen schlugen fehl. Irgendjemand eine Idee?
Hast du <html> auch auf 100% gesetzt?
mfg. Daniel