dimaqw
Goto Top

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!

Content-ID: 304688

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

Ausgedruckt am: 22.11.2024 um 11:11 Uhr

colinardo
Lösung colinardo 17.05.2016 aktualisiert um 11:34:23 Uhr
Goto Top
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
wiesi200
wiesi200 17.05.2016 um 11:25:22 Uhr
Goto Top
Hallo,

entweder Javascript, oder
nen Feststehenden Footer der immer am unteren Rand sichbar ist.
emeriks
emeriks 17.05.2016 um 11:26:10 Uhr
Goto Top
Hi,
als HTML-Dino würde ich jetzt <table> nehmen. Die mittlere <tr> mit height="*". Oder so ...

E.
dimaqw
dimaqw 17.05.2016 um 12:01:42 Uhr
Goto Top
Schönen Dank! Mit calc() hat es geklappt! face-smile