Div Höhe an Bildschirm Resthöhe anpassen

amiroo · #1 (**permalink**) 09.03.2010, 17:47

Hallo Leute,

ich habe mich bisher totgesucht ohne Erfolg. Vielleicht weiss ich auch nicht wie ich meine Frage in Suchmethoden formulieren soll.
Vielleicht kennt ihr ja die Lösung.

Ich habe 3 divs mit 100% breite untereinanander.
Der mittlere Div hat eine feste höhe von 500px. Der Obere und untere Div soll sich an den Bildschirmrest anpassen. So dass alle 3 zusammen den ganzen Bildschirm einnehmen.

Das sollte ja nicht so schwer sein. Aber ich habs einfach nicht hinbekommen.

Danke schonmal für eure Hilfe.

Oden · #2 (**permalink**) 10.03.2010, 18:19

Das hatte ich mal irgendwann in einem Forum gefunden und ein wenig angepaßt. Je nach deiner genauen Verwendung kann es durchaus brauchbar sein.
Bei #space ist margin-bottom die Hälfte von #inhalt height.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Intensivstation Center Box</title>
<style type="text/css"> <!--
html, body {
	height:100%;
	background-color: #FF9966;
}
body {
  	padding: 0;
  	margin:0;
}
#space { 
	width:1px;
	height:50%;
	margin-bottom:-150px; /* die hälfte der inhals's höhe */
	float:left;
}
#inhalt {
	width: 100%;
	height: 300px;
	background-color: #FFFFFF;
	margin: 0 auto;
	position:relative; /* hebt den inhalt vor den space  */
	clear:left; /* hebt das float vom space auf  */
}
#header, #footer {
	padding: 10px;
	margin: 0 auto;
}
.inhaltTXT{
	padding: 10px;
}
-->
</style>
</head>
<body>

<div id="space"><br /></div>
<div id="header">header</div>
<div id="inhalt"><div class="inhaltTXT">inhalt</div></div>
<div id="footer">footer</div>

</body>
</html>

cu.Oden

EvT · #3 (**permalink**) 10.03.2010, 18:59

Zitat:

Zitat von Oden

Das hatte ich mal irgendwann in einem Forum gefunden und ein wenig angepaßt.

Credits an Fricca. Diese ihre Methode steht auch in unserer FAQ.

CSS vertical center using float and clear

Oden · #4 (**permalink**) 10.03.2010, 19:08

Zitat:

Zitat von EvT

Credits an Fricca. Diese ihre Methode steht auch in unserer FAQ.

CSS vertical center using float and clear

Ok, solange bin ich nun auch noch nicht hier, daß ich die FAQ auswendig kenne.

cu.Oden

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe	danoman	CSS	5	24.04.2011 18:38
Div Höhe an Inhalt anpassen	prosol	CSS	4	28.03.2011 12:28
Div soll sich einem anderen anpassen	shallax	CSS	2	24.02.2009 16:25
Inhaltsbereich in der Höhe dynamisch anpassen	jorainbo	CSS	3	05.07.2004 09:39
höhe eines div tag an ein anderes anpassen	ffr	CSS	4	09.12.2003 16:59