# Problem mit 100% Seitenhöhe



## Microhome (29. November 2010)

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:


```
<!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.


----------



## SpiceLab (29. November 2010)

=Microhome hat gesagt.:


> Wenn der Inhalt des zweiten DIVs nun über seine Größe hinaus geht, soll IN DIESEM ein Scrollbalken erscheinen.
> 
> Habt ihr eine Idee wie das Problem zu lösen wäre?


Die Idee kommt wieder mal aus Stus Ecke: http://www.cssplay.co.uk/layouts/fixit.html - den Footer-Bereich denken wir uns  da kurz weg ;-)


----------



## Microhome (29. November 2010)

Okay, vielen Dank! Das scheint zu funktionieren. Der Trick liegt scheinbar im bottom:1px.


----------

