✔ Div auf Browserhöhr bringen

[herrgarnele]

Hallo Gemeinde!
Das Thema ist wohl schon hundertmal durchgekaut worden. Ich habe auch almighty google und die Forensuche ausgiebig bemüht. Aber ich komm einfach nicht dahinter.

In meinem Layout möchte ich, dass der Bereich #content bis zum Ende des Browserfensters angezeigt wird:

<div id="wrapper">
    <div id="left">Left column</div>
    <div id="right">Right column</div>
    <div id="center">
        <div id="content">
            Content
        </div>
    </div>
</div>

*{
    margin:0;
    padding:0;
    border:0;
}


html, body {
    background:#e7e7e7;
    height:100%;
    text-align:center;
}

#wrapper{
    width:945px;
    margin:0 auto;
    position:relative;
    min-height:100%;
    height:auto !important;
    height:100%;
}

#left{
    background:#0f0;
    width:177px;
    height:200px;
    position:absolute;
    left:0;
    top:169px;
}

#right{
    background:#0f0;
    width:177px;
    height:200px;
    position:absolute;
    bottom:0;
    right:0;
}

#center{
    background:#000;
    width:591px;
    position:relative;
    margin:0 177px 0 177px;
}

#content{
    background:#f00;
    width:591px;
    min-height:100%;
    height:auto !important;
    height:100%;
}

So wie ich das verstanden habe, sollte es der gefettete Teil bei #content tun. Tut er aber nicht

 

[Maik]

Hi,

da hast du etwas falsch verstanden, denn ausschliesslich das DIV #wrapper lässt sich mit dem angesprochenen Regelblock formatieren, damit es die gewünschte Mindesthöhe im Viewport einnimmt, für alle darin eingebetteten Blöcke ergibt sich ihre Höhe durch ihren Inhalt.

Mein Tutorial CSS-Layout mit 100%-Höhe mit den vier angehängten Ausbaustufen sollte Licht ins Dunkel bringen, wie sich der optische Eindruck erwecken lässt, als würden die Spaltenblöcken bis zum unteren Fensterrand reichen.

mfg Maik

 

[herrgarnele]

Hi Maik, Du bist ja immer am Start hier?
Danke für das Tutorial. Durch eine Hintergrundgrafik die 100% Höhe zu faken habe ich gemacht. Aber bezüglich des Footer weiß ich nicht, wie ich das lösen soll:
- Ist der Content niedriger als das Browserfenster, soll er am unteren Rand stehen
- Ist der Content länger, soll der Footer mit nach unten wandern

Bis hierhin schonmal dankeschön für die prompte Antwort!

 

[Maik]

Dann schau dir einfach mal im Attachment des Tutorials die beiden Beispiele

• 3cols_header_footer.htm
• 3cols_header_topNavi_footer.htm

an, die genau deine Vorgaben erfüllen.

mfg Maik

 

[herrgarnele]

Hoppla, den Anhang habe ich nicht beachtet.
Damit ist mir geholfen - dankeschön!