Dreizeiliges Layout mit variabler Höhe des Contents

[Lenzoi]

Hallo!

Ich soll ein dreizeiliges Layout, das derzeit mit Frames gelöst ist, neu umsetzen und würde das gerne mit div-Elementen (oder notfalls mit Tabellen machen). Das Layout sieht folgendermaßen aus:

|--------------------|

HEADER (fixe Höhe)
CONTENT (variabel)
--------------------
FOOTER (fixe Höhe)
--------------------

Die Seite soll sich der Höhe dem Bildschirm anpassen, Header und Footer sind fix, der Content ist in der Höhe variabel - wenn er zu hoch wird soll er (und nur der Content!) gescrollt werden.

Leider finde ich aber keine Lösung, entweder wird die Seite insgesamt höher oder die Höher von Header/Footer ändert sich auch. Weiß jemand, wie man soetwas anstellt? Meine Suche hier und bei Google war leider auch erfolglos :(

tia,
Lenzoi

[Daniel]

Ahoi Lenzoi,

Weiß jemand, wie man soetwas anstellt?

im HTML:
<div class="header" ...>...</div>
<div class="content" ...>...</div>
<div class="footer" ...>...</div>

im CSS:
div.header
{
 height:100px;
 position:fixed;
 top:0;
}
div.content
{
 max-height:300px;
 overflow:auto;
 position:fixed;
 top:100px;
}
div.footer
{
 height:100px;
 position:fixed;
 bottom:0;
}

So in etwa.

MfG

[Daniel]

So nochmal, jetzt mit Highlight und 2 Links

im HTML:

  
<div class="header" ...>...</div>  
<div class="content" ...>...</div>  
<div class="footer" ...>...</div>  

im CSS:

  
div.header  
{  
  height:100px;  
  position:fixed;  
  top:0;  
}  
div.content  
{  
  max-height:300px;  
  overflow:auto;  
  position:fixed;  
  top:100px;  
}  
div.footer  
{  
  height:100px;  
  position:fixed;  
  bottom:0;  
}  

Im allgemeinen beschäftige dich mit CSS:
http://de.selfhtml.org/css/layouts/index.htm
http://de.selfhtml.org/css/index.htm

MfG

[Lenzoi]

Danke für die Bemühungen, jedoch setzt so ein Layout voraus, dass ich weiß, wie hoch der Contentbereich ist - das hängt aber vom Browserfenster ab, daher hilft mir das nichts!

kungschu hat allerdings schon einen Link zu einer passenden Lösung gepostet!

Lenzoi

[Siechfred]

Die Seite soll sich der Höhe dem Bildschirm anpassen, Header und Footer sind fix, der Content ist in der Höhe variabel - wenn er zu hoch wird soll er (und nur der Content!) gescrollt werden.

In etwa so?
http://test.anaboe.net/dreizeilen.html

Siechfred

[Lenzoi]

Hallo!

Ja, das war bisher meine Lösung, allerdings ist die nicht zufriedenstellend, da Header und Footer Grafiken beinhalten und die pixelgenau gesetzt werden müssen und nicht über Prozentangaben.

Danke,
Lenzoi

[K42B3]

hi Lenzoi,

@Daniel das Problem bei position:fixed und max-height ist das der Internet Explorer das nicht interpretiert.

Eine Lösung nur mit divs fällt mir auch nicht ein ich würde das Grundgerüst mit Tabellen machen und in den Content bereich einen div layer setzten.

Die Tabelle würde dann ungefähr so aussehen

<table style="width:100%;height:100%;">
<tr>
 <td style="height:100px;"></td>
</tr>
<tr>
 <td>Hier der div layer</td>
</tr>
<tr>
 <td style="height:100px;"></td>
</tr>
</table>

Das Problem hier bei ist das du height im div layer fix angeben musst, weil sonst kommen bei zu großem Inhalt keine Scrollbalken.

mfg K42B3

[Lenzoi]

In die Richtung hatte ich auch gedacht, aber wie du bereits angesprochen hast, geht das eben auch nicht.

Danke,
Lenzoi

[kungschu]

Hallo.

Für derartige Standard-Layouts gibts es unzählige Beispiele im Netz. Um nur zwei Beispiele aufzuzeigen:
http://www.dynamicdrive.com/style/layouts/category/C11/ und http://de.selfhtml.org/layouts/index.htm

Tabellen dienen nicht zu Layoutzwecken.

Zudem könntest du dich über die Eigenschaft overflow sowie über die Positionierung mittels CSS im Allgemeinen informieren.

MfG, Kungschu.

[Lenzoi]

Danke für die Links! Ich denke http://www.dynamicdrive.com/style/layouts/item/css-top-and-bottom-frames-layout/ zeigt mir die Lösung.

Selbstverständlich habe ich mich über CSS-Positionierung und overflow etc informiert, ich hatte aber eben das Problem, dass ich für den overflow ja eine Höhenangabe brauche, die ich aber nicht bestimmen konnte.

Das Tabellen kein Instrument für das Layout sind, ist mir auch klar, drum habe ich ja auch geschrieben im Notfall, falls es eben mit divs allein nicht geht.

Danke,
Lenzoi

[Lenzoi]

Hallo!

Anbei noch die Lösung:

#header{
 position:absolute;
 top:0px;
 width:100%;
 height:100px;
 overflow:hidden;
}

#footer{
 position:absolute;
 bottom:0px;
 width:100%;
 height:100px;
 overflow:hidden;
}

#content{
 position:absolute;
 top:100px;
 bottom:100px;
 width:100%;
 overflow:auto;
}

Ich war auch schon knapp dran, nur wusste ich nicht, dass sich durch top und bottom die Höhe eingrenzen lässt - ich hätte gedacht, die beiden heben sich auf.

Einen Schönheitsfehler gibt es allerdings: Wenn sich im Content eine Tabelle befindet, die einen Overflow erzeugen müsste, geht das zwar in jedem vernünftigen Browser, nur der IE7 (und ev. auch frühere Versionen?) checkt es nicht - einen leeren Absatz (o.ä.) hilft.

LG,
Lenzoi