|
|||
![]()
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> |
Sponsored Links |
|
|||
![]()
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; } Workaround für den IE-6. |
Sponsored Links |
|
|||
![]()
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 (Das content-DIV füllt nicht den restlichen Bereich des grünen root-DIVs) Code:
http://img703.imageshack.us/i/bildschirmfoto20110424us.png/ 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> Daniel Geändert von danoman (24.04.2011 um 17:31 Uhr) |
|
||||
![]() Zitat:
![]() Zitat:
![]() Zitat:
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:
![]() Schicke ihn mit einem geeigneten Doctype in den Standard-Modus. |
|
|||
![]()
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 | |
Ansicht | |
|
|
![]() |
||||
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 |