CSS: prozentuales Problem

Hallo,

habe mein Seiten Layout in CSS erstellt, klappt auch alles wunderbar.
Nun zum Problem, mein Footer liegt am Browserrand auf, der Contentbereich soll genau bis zum Footer gehen, macht er aber nicht, er steht immer so weit drunter wie der Header hoch ist. Ich muss dazu sagen das ich die Haeder höhe fest vergeben habe was ich leider machen muss wegen dem Iframe inhalt. Gibt es ne möglichkeit das die Seite trotzdem immer 100% des Browserfensters ausfüllt?

Hier der Html Code:

<div id="content_container">
  <h1 id="header">
  <iframe src="oben.htm" width="100%" height="115" name="oben" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>
</h1>
   <div id="menu" nowrap="nowrap" style="min-width:950px;>
  <iframe src="menuleer.htm" width="181px" height="100%" name="menue1" scrolling="no" frameborder="0"></iframe>
  <iframe src="main.htm" width="721px" height="100%" name="cont" frameborder="0" scrolling="Auto"></iframe>
  </div>
 </div>
<div id="footer" >
  <iframe src="unten.htm" width="100%" height="13px" name="ftr" frameborder="0" scrolling="no"></iframe>
 </div>

und der CSS Code:

html, body
{
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
 background-color:#fffef4;
 min-height:382px;
}

#header
{
 margin:0;
 background:#fffef4;
 width:100%;
}

#content_container
{
 overflow:scroll;
    height:100%;
 margin:0px;
 min-height:382px;
 min-width:902px;
}

#footer
{
    background:#fffef4;
    height:13px;
 width:100%;
 margin:-13px;
 margin-left:0px;
}

#menu
{
 margin-bottom:0px;
  background:#FFFef4;
  min-height:382px;
  height:100%;
 text-align:left;
}

Hab schon alles durchgegoogelt aber nix konkretes zu der Problematik gefunden ausser alles prozentual zu machen. Wäre über jegliche Tipps dankbar.

  1. n'abend,

    Hier der Html Code:

    <div id="content_container">
      <h1 id="header">
      <iframe src="oben.htm" width="100%" height="115" name="oben" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>
    </h1>
       <div id="menu" nowrap="nowrap" style="min-width:950px;>
      <iframe src="menuleer.htm" width="181px" height="100%" name="menue1" scrolling="no" frameborder="0"></iframe>
      <iframe src="main.htm" width="721px" height="100%" name="cont" frameborder="0" scrolling="Auto"></iframe>
      </div>
    </div>
    <div id="footer" >
      <iframe src="unten.htm" width="100%" height="13px" name="ftr" frameborder="0" scrolling="no"></iframe>
    </div>

    bei dieser iFrame-Suppe drängt sich die Frage auf, wieso du nicht gleich richtig mit Framesets arbeitest? Durch dein Konstrukt hast du jedenfalls nichts (wesentliches) gewonnen.

    Ansonsten kannst du Elemente positionieren. Nimm Header und Footer aus dem Contentflow, positioniere sie absolut (also dort, wo sie stehen sollen), und gib einem "Inhalt" entsprechende margins.

    weiterhin schönen abend...

    --
    Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
    sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
    1. Ansonsten kannst du Elemente positionieren. Nimm Header und Footer aus dem Contentflow, positioniere sie absolut (also dort, wo sie stehen sollen), und gib einem "Inhalt" entsprechende margins.

      weiterhin schönen abend...

      Danke schon mal für die Antwort, hab probiert es umzusetzen, kriege es aber nicht hin, wenn ich das so umstelle sehe ich den Footer nicht mehr, könntest du mir genauer sagen was ich wo hinschreiben muss?

      1. n'abend,

        Danke schon mal für die Antwort, hab probiert es umzusetzen, kriege es aber nicht hin, wenn ich das so umstelle sehe ich den Footer nicht mehr, könntest du mir genauer sagen was ich wo hinschreiben muss?

        den Footer möchtest du bspw. mit

          
        #footer{  
          position:absolute;  
          bottom: 2px;  
          left: 2px;  
          right: 2px;  
          height: 23px;  
        }
        

        am unteren Rand mit jeweils 2 Pixel Abstand zum unteren, linken und rechten Rand positionieren.

        den Header analog zum Footer bspw. mit

          
        #header{  
          position:absolute;  
          top: 2px;  
          left: 2px;  
          right: 2px;  
          height: 42px;  
        }
        

        am oberen Rand mit jeweils 2 Pixel Abstand zu den Rändern positionieren.

        Deinen "Inhalt" könntest du ebenfalls absolut positionieren:

          
        #inhalt{  
          position:absolute;  
          top: 46px; /* 2px (header.top) + 42px (header.height) +  2px abstand zum header */  
          left: 2px;  
          bottom: 27px; /* 2px (footer.bottom) + 23px (footer.height) +  2px abstand zum footer */  
          right: 2px;  
        }
        

        Die Frage warum du nicht auf richtige Framesets setzt, hast du nicht beantwortet, warum? Warum eigentlich Frames?

        weiterhin schönen abend...

        --
        Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
        sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
        1. Danke , probiers gleich mal aus, der Grund ist das die Seite sehr umfangreich ist (150 unterseiten). Wenn ich das also alles css machen würde, müsste ich ja immer die Hauptseite kopieren mit dem jeweiligen Inhalt der grade angeklickt wurde. Falls ich das richtig verstanden habe.....

          Frames hatte ich vorher auch, ist sicherlich kein großer vorteil so aber mir fällt keine bessere Lösung ein, vieleicht hast du ja ne Idee...

          1. n'abend,

            Wenn ich das also alles css machen würde, müsste ich ja immer die Hauptseite kopieren mit dem jeweiligen Inhalt der grade angeklickt wurde. Falls ich das richtig verstanden habe.....

            jein.

            Frames hatte ich vorher auch, ist sicherlich kein großer vorteil so aber mir fällt keine bessere Lösung ein, vieleicht hast du ja ne Idee...

            die Idee besteht darin, deine Seiten dynamisch zusammenbauen zu lassen. Ein PHP (Ruby/Perl/Python/wasauchimmer) Script kann einzelne Komponenten (Header, Navigation, Footer) und Inhalte zu kompletten HTML-Seiten zusammenstricken. Kommt halt drauf an, ob dein Hoster eine der im Web üblichen Scriptsprachen anbietet.

            weiterhin schönen abend...

            --
            Freundlich wie man war, hat man mir Großbuchstaben geschenkt.
            sh:( fo:# ch:# rl:| br:> n4:& ie:{ mo:} va:) de:] zu:} fl:( ss:? ls:[ js:|
            1. Kommt halt drauf an, ob dein Hoster eine der im Web üblichen Scriptsprachen anbietet.

              Das weiß ich ja leider nicht, ist für meine Firma, ist aber ne überlegung für die Zukunft wert, muss jetzt aber erstmal so ins Netz damit man uns überhaupt mal findet.

              Es haut wunderbar im Firefox hin, nur im IE nicht, da geht der Content unter dem Footer weiter, braucht man dafür wieder nen speziellen Hack oder so?