DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe

danoman · #1 (**permalink**) 24.04.2011, 03:21

Hallo zusammen,

hoffe die Überschrift ist nicht allzu unglücklich ...
ich schilder erstmal den Sachverhalt: Ich habe ein root-DIV mit 100% width und height. Dieses DIV füllt also den gesamten Browserbereich. In diesem root-DIV befinden sich nun zwei weitere DIVs. Ein menu-DIV und ein content-DIV. Das menu-DIV hat eine statische höhe von exakt 35px. Das content-DIV ist direkt unter dem menu-DIV angeordnet. Beide DIVs füllen die maximale Browserbreite aus. Soweit so gut.

Nun möchte ich aber, dass sich die content-DIV-Höhe nicht seinem Inhalt anpasst, sondern immer den restlichen Bereich bis zum Ende des root-DIVs ausfüllt.

Dazu habe ich also versucht dem content-DIV die höhe 100% zu geben. Das funktioniert zwar, geht aber über die Höhe des root-DIVs hinaus. Und zwar um 35px - genau um die Höhe des menu-DIVs. Bei "height: auto" passiert genau das Gleiche.

Wie kann ich das content-DIV dazu bringen, einfach die ausstehende Höhe des root-DIVs auszfüllen ohne über die Höhe des root-DIVs hinaus zu gehen?
Grundsätzlich funktioniert das ja mit prozentuellen Angaben. Z.B.: Menuhöhe 10% - Contenthöhe 90%. Das Menü soll aber eine fixe Höhe von immer 35px besitzen. Ich hoffe das ist klar soweit.

Wär schön, wenn jemand diesen Code hier entsprechend ergänzen könnte:

Code:

<html>
    <head>
        <style>
            body{
                margin: 0px;
                padding: 0px;
            }
            
            .root{
                position: absolute;
                width: 100%;
                height: 100%;
                /*Die Farben sollen nur die Bereiche kenntlich machen*/
                background-color: green;
            }

            .menu{
                position: relative;
                height: 35px;
                background-color: red;
            }

            .content{
                position: relative;
                /*Dieses DIV soll die restliche Höhe des root-DIVs ausfüllen.
                Bis jetzt ist es nur so hoch, wie sein Inhalt.
                Im Fall dieses Beispiels also nur eine Zeile. height: 100% und
                height: auto überschreiten das root-DIV um die fixe Höhe des
                menu-DIVs (35px)*/
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="root">
            <div class="menu">
                Menu
            </div>
            <div class="content">
                Content
            </div>
        </div>
    </body>
</html>

gaby · #2 (**permalink**) 24.04.2011, 08:50

Hallo,

#root und #menu brauchen kein 'position'.

#content bekommt eine Breitenangabe, 'overflow: auto', und wird absolut positioniert, (von 'top: [unterhalb des Menüs]' bis 'bottom: 0'.

Zu empfehlen ist besonders hier die Schrifteinheit "em" für die Box-Höhen, wenn du vermeiden möchtest, daß sich bei Schriftvergrößerung der #content über das #menü schiebt und somit die Links unlesbar macht.

bsp:

Code:

.menu{
                height: 3.7em;
                background-color: red;
            }

Das 'top' des #content dann natürlich ebenfalls in der Schrifteinheit "em" angeben.

Workaround für den IE-6.

danoman · #3 (**permalink**) 24.04.2011, 17:28

Danke für die fixe Antwort. Das Ganze funktioniert im Safari 5 und Firefox 3.6 perfekt (abgesehen von der Breite, overflow: auto. Das content-DIV ist nur so breit wie sein Inhalt. Lässt sich aber mit width: 100% und ohne das Overflow-Tag ausbügeln).

Problematisch ists nur mit dem IE6 & IE8. Da ist das root-DIV nur so hoch und so breit wie sein Inhalt. Gibt es da eine Lösung die mit Safari, Firefox und IE(ab 7 oder 8 meinetwegen - IE6 Support ist mir egal) funktioniert?

Hier einmal die Screenshots:

richtigerweise im Safari/Firefox:

Code:

http://img683.imageshack.us/i/bildschirmfoto20110424ue.png

Problem im IE8:
(Das content-DIV füllt nicht den restlichen Bereich des grünen root-DIVs)

Code:

http://img703.imageshack.us/i/bildschirmfoto20110424us.png/

Und hier nochmal der Code wie er im moment ist:

Code:

<html>
    <head>
        <style>
            body{
                margin: 0px;
                padding: 0px;
            }

            .root{
                width: 100%;
                height: 100%;
                /*Die Farben sollen nur die Bereiche kenntlich machen*/
                background-color: green;
            }

            .menu{
                height: 3.7em;
                background-color: red;
            }

            .content{
                position: absolute;
                top: 3.7em;
                bottom: 0em;
                /*overflow: auto; - Funktioniert nicht. Deswegen das width-Tag*/
                width: 100%;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="root">
            <div class="menu">
                Menu
            </div>
            <div class="content">
                Content
            </div>
        </div>
    </body>
</html>

Gruß
Daniel

cebito · #4 (**permalink**) 24.04.2011, 18:21

Zitat:

Zitat von danoman

Gibt es da eine Lösung die mit Safari, Firefox und IE(ab 7 oder 8 meinetwegen - IE6 Support ist mir egal) funktioniert?

Gibt es, wie wäre es die Browser aus dem Quirksmode zu holen - sprich, der Seite mal nen Doctype zu geben? Man kann sich seine "Probleme" auch selbst schaffen

gaby · #5 (**permalink**) 24.04.2011, 18:25

Zitat:

Zitat von danoman

Danke für die fixe Antwort. Das Ganze funktioniert im Safari 5 und Firefox 3.6 perfekt

... und Opera und Chrome

Zitat:

(abgesehen von der Breite, overflow: auto. Das content-DIV ist nur so breit wie sein Inhalt.

Deshalb schrieb ich ja auch: "#content bekommt eine Breitenangabe".

Zitat:

Lässt sich aber mit width: 100% und ohne das Overflow-Tag ausbügeln.

'overflow: auto' brauchst du, damit Scrollbalken für #content angezeigt werden können, wenn du viel Inhalt hast. Andernfalls läuft der Inhalt nach unten aus #content heraus, und dort hast du dann den Hintergrund von body.

Teste doch mal mit etwas mehr Inhalt als nur einer Zeile:

Code:

<body>
    <div class="root">
        <div class="menu">   Menu   </div>
		
        <div class="content">
                first  <p>Content<br></p>  <p>Content<br></p> <p>Content<br></p> <p>Content<br></p> <p>Content<br></p> <p>Content<br></p> <p>Content<br></p> <p>Content<br></p> <p>Content<br></p> <p>Content<br></p> <p>Content<br></p> <p>Content<br></p> <p>Content<br></p>  last

        </div>
    </div>
</body>
</html>

Zitat:

Problematisch ists nur mit dem IE6 & IE8.

Ja, der IE im quirks-mode ist die letzte Pfeife.

Schicke ihn mit einem geeigneten Doctype in den Standard-Modus.

danoman · #6 (**permalink**) 24.04.2011, 18:38

Sauber... ihr habt mir den Tag gerettet. Das mit dem Overflow ist jetzt auch klar. Stichwort Quirksmode wars. CSS und Webentwicklung ist nicht mein Lieblingsding -.-. Wie auch immer... läuft jetzt. Vielen Dank nochmal
Daniel

Hier nochmal der Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            body{
                margin: 0px;
                padding: 0px;
            }

            .root{
                width: 100%;
                height: 100%;
                /*Die Farben sollen nur die Bereiche kenntlich machen*/
                background-color: green;
            }

            .menu{
                height: 3.7em;
                background-color: red;
            }

            .content{
                position: absolute;
                bottom: 0em;
                top: 3.7em;
                width: 100%;
                overflow: auto;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="root">
            <div class="menu">
                Menu
            </div>
            <div class="content">
                Content
            </div>
        </div>
    </body>
</html>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18