Layout

[LinusHH]

Hi Forum,

ich habe ein grundsätzliches Problem mit dem Layout - entweder geht das (so) nicht oder es ist so einfach, das ich es einfach nicht sehe :mrgreen:

Ob nun per <div>-Elemente oder per <table> - ich möchte drei Bereiche haben. Oben der Kopf, in der Mitte der Datenbereich und unten einen Fussbereich. Aber:

Der Fussbereich soll immer (!!) am unteren Ende des Browsers stehen - egal wieviel im Datenbereich steht. Steht mehr im Datenbereich als angezeigt werden kann, soll nur für den Datenbereich eine Scrollbar angezeigt werden.

Also im Prinzip so was:

<table>
<tr height=30px>
<td></td>
</tr>
<tr height=100%>
<td></td>
</tr>
<tr height=50px>
<td></td>
</tr>
</table>

Ich hoffe, ich habe mein "Problem" ausreichend erklären können und ihr zeigt mir Dösbaddel,wie und ob das geht ;Jump

mfg
LinusHH

 

[znay]

Du nimmst dir einfach den Footer und positionierst mit position:absolute; am unteren Ende des Browsers dem Inhaltsbereich gibst du eine passende Höhe und ein overflow:scroll, damit eine Scrollbar erzielt wird.
Das sollte das Problem eigentlich gelöst haben.

 

[LinusHH]

Danke für Deine Antwort. Ich habe das einmal wie folgt ausprobiert:

<table>
<tr>
<td>
head
</td>
</tr>
<tr>
<tdstyle="overflow:scroll;">
data data data data data data data data data
data data data data data data data data data
data data data data data data data data data
</td>
</tr>
<tr>
<tdstyle="position:absolute; bottom:30px">
foot
</td>
</tr>
</table>

Der Fussbereich wird jetzt zwar "sauber" am unteren Ende angezeigt - verkleinert man aber den Browser und der Bereich wird zu klein für eine Gesamtdarstellung, wird der Fuss- über den Databereich gelegt. Lustiger Effekt, aber so nicht gewünscht.
Vielmehr soll im Databereich eine Scrollbar erscheinen und die drei Bereiche nicht überlappen.

Hast Du eine Idee?

tia
LinusHH

 

[Dark D.]

<div style="height: 10%">Hier der header</div>
<div style="height: 80%; overflow: auto;">Hier der Inhalt</div>
<div style="height: 10%;">hier der footer</div>

Das in den BODY, die Höhenangaben nach deinen Wünschen anpassen;
noch schöner wirds, wenn du die style-Angaben auslagerst.

 

[znay]

Hatte wohl eine kleine Blockade, als ich das geschrieben habe. Habe gerade etwas rumprobiert und das hier kam dabei raus:

<div id="content">
    <p>Lorem Ipsum dolor sit amet...</p>
</div>
<p id="footer">Footerbereich!</p>

*{
margin:0px;
padding:0px;
}
#footer{
background:#fff;
position:fixed;
bottom:0px;
width:100%;
height:5%;
}
#content{
margin-bottom:8%;
}

Erklärung:
Der Footer wird unten positioniert, durch position:fixed; ist er immer an der gleichen Stelle. Durch die Hintergrundfarbe schimmert der Text aus #content nicht durch, dieser Bereich bekommt ein margin-bottom, der so groß ist, dass #footer darin Platz hat.

Das war das ganze Geheimnis :-?

Edit:
@Dark D.
Deine Möglichkeit funktioniert nicht so, wie der Threadersteller es möchte. der Footer soll schließlich fix am unteren Browserrand sein. Egal wie hoch der Inhalt im Content ist.