zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.04.2011, 04:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2010
Beiträge: 4
danoman befindet sich auf einem aufstrebenden Ast
Standard DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe

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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.04.2011, 09:50
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.04.2011, 18:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2010
Beiträge: 4
danoman befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von danoman (24.04.2011 um 18:31 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 24.04.2011, 19:21
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von danoman Beitrag anzeigen
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
Mit Zitat antworten
  #5 (permalink)  
Alt 24.04.2011, 19:25
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von danoman Beitrag anzeigen
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.
Mit Zitat antworten
  #6 (permalink)  
Alt 24.04.2011, 19:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2010
Beiträge: 4
danoman befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:17 Uhr.