✔ 2 DIV-Elemente untereinander, 1 x variabel und 1 x fix

Q

QUEST08

Erfahrenes Mitglied
Hallo,

tja, ich kämpfe jetzt schon eine ganze weile mit einem wohl eigentlich recht einfachen Problem:

Ich möchte 2 DIV-Elemente untereinander haben.
Das erste soll sich dem Inhalt anpassen, jedoch mindestens Fensterfüllend sein, abzüglich dem "Footer"-DIV.

HTML: 
<div id="wrapper">
  <div id="contentzone"></div>
  <div id="footerzone"></div>
</div>

Code: 
#wrapper {
  height: 100%;
  min-height: 100%;
  width: 100%;
  min-width: 100%;
  background-color: #161616;
  padding: 0px;
  margin: 0px;
}

#contentzone {
  height: 100%;
  min-height: 100%;
  width: 100%;
  min-width: 100%;
  padding: 0px;
}

#footerzone {
  height: 30px;
  min-height: 30px;
  width: 100%;
  min-width: 100%;
  background-color: #161616;
  padding: 0px;
  margin: 0px;
}

Der eigentliche Inhaltsbereich soll, auch wenn er leer ist, das komplette Fenster füllen. Der Footer soll aber noch in der Fensterhöhe sein und nicht nach unten geschoben werden. Somit soll beides zusammen 100%-Fensterhöhe ergeben. Gleichzeitig soll aber bei viel Inhalt in "contentzone" die Scrollbar angezeigt werden und der Footer ganz unten bleiben.
Hat jemand zufällig den passenden Kniff?
 
Zuletzt bearbeitet:
Hallo,

weiß nicht ob das, das ist was du brauchst

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<style type="text/css">
html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	font-family: futura, Verdana;
	font-size: 10px;
}

div#main_container {
	position: relative;
	width: 100%;
	height: 100%;
}

div#Content {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 80%;
	overflow: auto;
	overflow-x: hidden;
	background-color: red;
}

div#Footer {
	position: absolute;
	top: 80%;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: black;
}


</style>
</head>
<body>
<div id="main_container">
	<div id="Content">
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAAAHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		AHAHAHJSHJHDJHSJHJDAHJSHDJAHSALLALLALLALALALLAAAA
		
	</div>
	<div id="Footer">
	</div>
</div>
</body>
</html>

so habe ich das halt verstanden :)

lg
 
Hallo Xervos,

ja fast perfekt. Nur das die Scrollbar über das komplette Fenster gehen soll. Aber das sieht schon mal sehr gut aus. Das mit der Scrollbar werd ich jetzt noch versuchen. Vielen vielen Dank******

Falls du was wegen der Scrollbar zur Hand hast, gerne. Aber irgendwie bekomme ich das schon hin.

Danke!

Grüße,
QUEST08
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück