Hupraum: Dynamische Anordnung in der Höhe

Hallo,
Erst einmal vielen Dank an alle die das ganze mit SelfHtml betreiben und unterstützen. Ich habe eine Menge von euch mitgenommen…

Ich benötige eine Idee um wie folgt meine Seite aufzubauen:
________________________________
Head: height:100px (fix)

________________________________
Content: Dynamisch
(angepasst an Head und Feed)

________________________________
Feed: height:60px (fix)
________________________________

Mit Table komme ich nicht weiter. Und mit Div-Boxen würde ich es nur über die Abfrage der Fensterhöhe hinbekommen. Ist aber unschön wegen dem Scrollbalken, der je nach Fenstergröße ein- oder ausgeblendet ist.

Gruß
hupraum

  1. Hi there,

    Mit Table komme ich nicht weiter. Und mit Div-Boxen würde ich es nur über die Abfrage der Fensterhöhe hinbekommen. Ist aber unschön wegen dem Scrollbalken, der je nach Fenstergröße ein- oder ausgeblendet ist.

    Aha. Vielleicht interessiert das ja den einen oder anderen...;)

    Falls Deine unausgesprochene Frage ist, wie Du das hinbekommst, würde ich sagen, den Headerbereich (das was Du div-Box nennst) setzt Du absolut top auf 0; und den Footerbereich absolut bottom auf 0, und Dein präsumptives Problem ist gelöst...

    1. @@Klawischnigg:

      nuqneH

      Falls Deine unausgesprochene Frage ist, wie Du das hinbekommst

      :-)

      würde ich sagen, den Headerbereich (das was Du div-Box nennst) setzt Du absolut top auf 0; und den Footerbereich absolut bottom auf 0, und Dein präsumptives Problem ist gelöst...

      … bei entsprechendem Padding für den Content-Bereich.

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

        … bei entsprechendem Padding für den Content-Bereich.

        … der durchaus auch <body> sein kann.

        Matthias

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. Ich habe meine Antwort leider schon unter dem Kommentar von Klawischnigg gegeben. Hier nocheinmal:

          Hallo,
          vielen Dank für die Antworten. Das Komplizierte ist oft sehr einfach zu lösen. Ich habe es hinbekommen:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <body>

          <div style="position:absolute; top:0px; left:50px; height:100px; right:50px; background-color:#DFDFDF;">
             <b>Head</b> height:100px;
           </div>

          <div style="position:absolute; top:120px; left:50px; bottom:80px; right:50px; background-color:#BF00FF;">
             <b>Content</b> (dynamisch)
           </div>

          <div style="position:absolute; bottom:0px; left:50px; height:60px; right:50px; background-color:#DFD0CE;">
            <b>Feed</b>  height:60px;
           </div>

          </body>
          </html>

          Damit ist meine Frage beantwortet.
          Gruß
          Johannes

    2. Hallo,
      vielen Dank für die Antworten. Das Komplizierte ist oft sehr einfach zu lösen. Ich habe es hinbekommen:

        
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
      <html>  
      <body>  
        
       <div style="position:absolute; top:0px; left:50px; height:100px; right:50px; background-color:#DFDFDF;">  
         <b>Head</b> height:100px;  
       </div>  
        
       <div style="position:absolute; top:120px; left:50px; bottom:80px; right:50px; background-color:#BF00FF;">  
         <b>Content</b> (dynamisch)  
       </div>  
        
       <div style="position:absolute; bottom:0px; left:50px; height:60px; right:50px; background-color:#DFD0CE;">  
        <b>Feed</b>  height:60px;  
       </div>  
        
      </body>  
      </html>  
      
      

      Damit ist meine Frage beantwortet.
      Gruß
      Johannes