[Gelöst] CSS - Prozentuale Höhenangaben für Inhaltselemente #header, #container, #foo

**KloBoBBerLe** · 01.06.2015, 14:13

Liebe Leser,

wie kann ich denn den im folgenden Minimalbeispiel vorhandenen Inhaltselementen #header, #container und #footer relative und somit prozentuale Höhenangaben zuweisen?

HTML-Code:

<!DOCTYPE html>
<html lang="de">
	<head>
		<body id="top" class="win firefox gecko fx38">
			<div id="wrapper">
				<header id="header">
				<div id="container">
				<footer id="footer">
			</div>
		<script>
		</body>
</html>

Mir ist natürlich bewusst, dass die Child-Elemente immer eine Bezugsgröße ihres jeweiligen Parent-Elements benötigen.
Wenn ich nun also die Parent-Elemente und deren Child-Elemente per CSS auf die volle Bildschirmhöhe ausdehne...

Code:

html,
body,
#top,
#wrapper { height: 100%; }

... und nachfolgend auch die gewünschten Child-Unterelemente mit einer spielerischen Beispielhöhe versehe...

Code:

#header,
#container,
#footer { height: 33,3333%; }

... dann passiert in Contao einfach mal rein gar nichts.

In welcher Passage kam mein unterdurchschnittlicher Intellekt an seine Grenzen?

Besten Dank für Eure Unterstützung!

Viele Grüße
KloBoBBerLe

**dazzle89** · 01.06.2015, 14:31

hast du auch schon min-height ausprobiert?

**Socki** · 01.06.2015, 15:34

Code:

#header,
#container,
#footer { height: 33,3333%; }

Wenn dies so auf deiner Seite steht, geht es wegen dem Komma "," bei 33,3333% nicht, da sollte ein punkt hin.
Gruß Socke

**Spooky** · 01.06.2015, 15:42

Zitat von KloBoBBerLe

... dann passiert in Contao einfach mal rein gar nichts.

Mit Contao hat das nichts zu tun

**KloBoBBerLe** · 01.06.2015, 18:05

Herzlichen Dank für Eure Unterstützung!

Zitat von dazzle89

hast du auch schon min-height ausprobiert?

Das blieb leider ebenso funktionslos...

Zitat von Socki

Code:

#header,
#container,
#footer { height: 33,3333%; }

Wenn dies so auf deiner Seite steht, geht es wegen dem Komma "," bei 33,3333% nicht, da sollte ein punkt hin.
Gruß Socke

Nein, keine Sorge! Das war ja nur ein Beispiel!

Zitat von Spooky

Mit Contao hat das nichts zu tun

In der Tat!

Des Rätsels Lösung:

Code:

#header,
#container,
#footer		{	height: 10%;			/* Höhe der Elemente */
			position: absolute;	}

Nun schiebt es zwar den #container ebenfalls bis ganz nach oben an die Bildschirmkante, aber das kann bestimmt noch irgendwie mit clear:both oder so korrigiert werden...

Edit:

Zwischenzeitlich habe ich das Problem nun äußerst komfortabel mit Flexboxen gelöst... Nie wieder Ärger mit Position & Co.!

Viele Grüße
KloBoBBerLe

**denniserdmann** · 02.06.2015, 08:30

Für Diejenigen, die vor ähnlichen Problemen stehen: Schaut euch mal die Viewport-Einheit vh an.
100vh --> 100% Browserfensterhöhe.

Funktioniert allerdings erst ab IE9.

**Spooky** · 02.06.2015, 08:53

Und auf iOS leider gar nicht

**denniserdmann** · 02.06.2015, 09:03

Zitat von Spooky

Und auf iOS leider gar nicht

Das stimmt so nicht. Es gibt zwar unter iOS 7 einen Bug (und einen Workaround),
aber mit iOS8 funktioniert das ohne Probleme, siehe http://caniuse.com/#feat=viewport-units