Prozentuale Höhenangabe wird ignoriert von Blackpanther23, 04.09.2015 19:00

Prozentuale Höhenangabe wird ignoriert

Blackpanther23 04.09.2015 19:00

css
html

Hallo zusammen,

habe das Problem, dass prozentuale Höhenangaben mit CSS ignoriert werden. Nach eigener Recherche kam heraus, dass ich dem HTML (dem HEAD?) und dem BODY Element 100% Höhe "zuweisen" muss. Quelle: Linkbeschreibung

Aber ich kriege es nicht umgesetzt, würde mir jemand das an meinem Beispiel zeigen? "height" als Parameter anzuhängen, hat nicht funktioniert und das hier:

html, body {
  height:100%;
}

habe ich offensichtlich falsch positioniert. Ich weiß mir keinen Rat mehr...

Hier mein Code:

<!DOCTYPE html>
<html lang="de" height="100%">
<head height="100%"><title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="design.css" type="text/css" rel="stylesheet">
</head>

<body bgcolor="#7e7e7e" height="100%">
<header>
<!-- <img src="logo.jpg" width="50" height="50"></img>-->  
</header>
 
<article>
<h1>Überschrift</h1>
	<div id="navigation">
		<div id="item1">Part A</div>
		<div id="item2">Part B</div>
		<div id="item3">Part C</div>
		<div id="item4">Part D</div>
		<div id="item5">Part E</div>
		
	</div>

</article>
 
<aside>
<!---weiterführende Informationen --->
</aside>
 
<footer>
Ersteller dieser Website bin ich selbst.
</footer>
</body>
</html>

und falls das notwendig sein sollte, meine CSS Datei:

#container{
	flex-direction: row;
	flex-wrap: nowrap;
	display: -webkit-flex;
	display: flex;	
}

#navigation{
	margin-top: 20px;
	background-color: green;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: nowrap;
	display: -webkit-flex;
	display: flex;	
}

#item1 {
	box-sizing: border-box;
	background: red;
	width="15%";
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width: 12%;
	height: 25%;
}

#item2 {
	box-sizing: border-box;
	background: red;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width: 12%;
	height: 25%;
}

#item3 {
	box-sizing: border-box;
	background: red;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width: 12%;
	height: 25%;
}

#item4 {
	box-sizing: border-box;
	background: red;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width: 12%;
	height: 25%;
}

#item5 {
	box-sizing: border-box;
	background: red;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width: 12%;
	height: 25%;
}



@font-face {
	color: #72C87D;
	font-size: 1 em;
	text-align: center;
	font-weight: bold;
}