Jens Schärer: iframe auf 100% Höhe

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

  1. 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.

  2. 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