✔ min-height in verschachtelten divs

H

HarlekinJie

Grünschnabel
Heya

Ich versuche mir gerade anzugewöhnen meine Seiten nicht mehr per table sondern mit divs zu formatieren.
Dabei habe ich gerade folgendes Problem: Ich habe ein 3-spaltiges Layout - links und rechts Grafiken als Ränder und in der Mitte den Inhalt. Der div mit dem Inhalt soll dann die Höhe der ganzen Seite bestimmen. Das habe ich jetzt so gebaut, dass ich ein div habe mit dem linken Rand, darin eins mit dem rechten Rand und darin nochmal eins mit dem Inhalt. Das funktioniert soweit auch einwandfrei.
Mein Problem besteht jetzt darin, dass der div mit dem Inhalt mindestens 100% des Browserfensters hoch sein soll.
Setz ich jetzt für alle 3 divs min-height:100%;, wird das nur für das erste div interpretiert. Setz ich für die 2 äußeren divs height:100%; und für das div mit dem Inhalt min-height:100%;, gibt es Probleme wenn der Inhalt größer als das Browserfenster wird.

Hab jetzt keine Ideen mehr wie ich das noch realisieren kann - wäre für einen kleinen Tipp sehr dankbar. Oder gibt es eine Möglichkeit das ganze eleganter zu bauen?

HTML Seite
CSS Datei
 
Hi,

so sieht mein Vorschlag aus, um dem Mindesthöhen-Problem der verschachtelten DIVs zu begegnen:
HTML: 
<body>

<div class="wrapper">

<a href="style/style.css">style.css</a><br>
- Text -<br>
- Text -<br>
- Text -<br>
- Text -<br>

</div>

</body>
CSS: 
html        {        height:100%;
                        width:100%;
                }

body        {      height:100%;
                        width:100%;
                        margin: 0px;
                        padding: 0px;
                        color:#000000;
                        font-size:12px;
                        font-family:verdana,arial;
                        background: url(img/site_left.gif) repeat-y left;
                }



div.wrapper        {        min-height:100%;
                            height:auto !important;
                            height:100%;
                            margin-left:50px;
                            background: #666 url(img/site_right.gif) repeat-y right;
                        }

mfg Maik
 
Maik, für welchen Browser ist der zweite height-Wert? Ab IE8, würde ich raten?
Wobei ich dachte auch dieser würde !important noch interpretieren? :confused:
CSS: 
height:auto !important;
height:100%;
 
CSS: 
min-height:100% /*Mindesthöhe in standardkonformen Browsern */
height:auto !important; /* autom. Höhe mit !important-Regel für standardkonforme Browser, um nachfolgende height-Deklaration zu ignorieren */
height:100% /* "Mindesthöhe" in IE(<7) */

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück