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>