Microhome
Erfahrenes Mitglied
Hallo zusammen,
ich möchte zwei DIVs untereinander anordnen. Das erste DIV hat eine Höhe von 100px, das zweite soll die restliche Höhe bis zum Seitenende ausfüllen. Wenn der Inhalt des zweiten DIVs nun über seine Größe hinaus geht, soll IN DIESEM ein Scrollbalken erscheinen.
Folgenden Code habe ich bisher:
Das einzige Problem ist im Prinzip nur noch die Body-height, da der Browser zu den 100% noch die Höhe des ersten DIVs (100px) dazuaddiert. Ich kann ja leider nicht beide Angaben vermischen, also dem Body sagen, dass es eine Höhe von 100%-100px haben soll.
Habt ihr eine Idee wie das Problem zu lösen wäre?
Vielen Dank und einen schönen Abend aus Berlin.
ich möchte zwei DIVs untereinander anordnen. Das erste DIV hat eine Höhe von 100px, das zweite soll die restliche Höhe bis zum Seitenende ausfüllen. Wenn der Inhalt des zweiten DIVs nun über seine Größe hinaus geht, soll IN DIESEM ein Scrollbalken erscheinen.
Folgenden Code habe ich bisher:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test 100% Höhe</title>
<style>
html, body {
margin:0;
padding:0;
height: 100%;
}
</style>
</head>
<body>
<div style="height:100%; width:500px;">
<div style="height: 50px;background-color: red;"></div>
<div style="height: 100%;background-color: green; overflow:auto;">
Zeile 1<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>Zeile 2
</div>
</div>
</body>
</html>Das einzige Problem ist im Prinzip nur noch die Body-height, da der Browser zu den 100% noch die Höhe des ersten DIVs (100px) dazuaddiert. Ich kann ja leider nicht beide Angaben vermischen, also dem Body sagen, dass es eine Höhe von 100%-100px haben soll.
Habt ihr eine Idee wie das Problem zu lösen wäre?
Vielen Dank und einen schönen Abend aus Berlin.
