DIV-Container mit variabler Höhe

Hallo!

Kurz zu meinem Problem: ich habe 3 DIVs (Header, Container und Footer), die untereinander stehen. Es muss erreicht werden, dass #container die restliche Höhe vom Fenster annimmt.

<!DOCTYPE html>
<html lang="de">  
<head>
	<style>     
		html, body {
			height: 100%;
			margin: 0;
		}
		body {
			background-color: blue;
		}
		#header {
			background-color: red;
			height: 200px;
		}
		#container {
			background-color: green;
		}
		#footer {
			background-color: yellow;
			height: 100px;
		}
	</style>
</head>
<body>
	<div id="header">  
	header
	</div>	
	<div id="container">  
	container
	</div>	
	<div id="footer">  
	footer
	</div>		
</body>
</html>

Wenn #container zu wenig Inhalt hat, habe ich das Problem, dass der Footer zu weit oben steht. Wenn ich bei #container {min-height: 100%;} reinschreibe, wird der Bereich zu groß. Ich bräuchte so was wie #container {height: Resthöhe;}.

Danke im Voraus!

Please also mark the comments that contributed to the solution of the article

Content-Key: 304688

Url: https://administrator.de/contentid/304688

Printed on: April 19, 2024 at 17:04 o'clock

4 Comments

Latest comment

Hallo dimaqw,
hier mal eine mögliche Variante mit CSS3 und calc()
https://jsfiddle.net/h1kabqj3/

Wenn der Footer stattdessen am unteren Rand immer fest stehen soll ,also immer sichtbar sein soll auch wenn der Haupt-Content länger ist, musst du den Footer als position:fixed und bottom:0px definieren.
https://jsfiddle.net/bt7dLaec/1/

Ansonsten ein sehr bekanntes Framework für solche Sachen ist Flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grüße Uwe