Markus Rost: Höhe 100% in jedem Browser

Beitrag lesen

SELF-Forum

Höhe 100% in jedem Browser

Markus Rost
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich bastel gerade an einem Layout und habe ein Problem mit der Höhe eines Elements.

Ich will auf der linken Seite einen blauen Balken anzeigen, der über die ganze Seitenhöhe geht.

<!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=ISO-8859-1" />  
<title>Versuchstemplate Pfadiseite</title>  
  
<style type="text/css">  
<!--  
* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */  
margin: 0;  
padding: 0;  
font: bold 1em verdana, sans-serif;  
}  
  
body {  
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */  
}  
  
div {  
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */  
}  
  
html, body {  
height: 100%;  
}  
  
/* DIV-Boxen */  
  
div#wrapper {  
position: relative;  
margin: 0 auto;  
width: 975px;  
min-height: 100%;  
height: auto !important;  
height: 100%;  
/*background: url(3cols.png) repeat-y;*/  
border-left: 1px solid #b8b8b8;  
border-right: 1px solid #b8b8b8;  
}  
  
div#header {  
height: 100px;  
background: url(header.jpg);  
}  
  
div#leftCol {  
	width: 138px;  
	margin-top: 7px;  
	margin-left: 7px;  
	margin-bottom: 7px;  
	background: #004886;  
	height: 99%;  
	min-height: 99%;  
	height: auto !important;  
	border-right: 1px solid #b8b8b8;  
	float: left;  
}  
  
div#blueBox {  
	margin-top: 7px;  
	margin-left: 7px;  
	margin-bottom: 7px;  
	height: 99%;  
	height: auto !important;  
	min-height: 99%;  
	width: 138px;  
	background: #004886;  
}  
  
div#rightCol {  
width: 175px;  
border-left: 1px solid #b8b8b8;  
float: right;  
}  
  
div#centerCol {  
margin: 0 145px;  
}  
  
  
/* clearfix zum Aufheben der Floatumgebung */  
  
.clearfix:after {  
content: ".";  
display: block;  
height: 0;  
font-size: 0;  
clear: both;  
visibility: hidden;  
}  
  
.clearfix {display: inline-block;}  
  
/* Hides from IE-mac \*/  
* html .clearfix {height: 1%;}  
.clearfix {display: block;}  
/* End hide from IE-mac */  
  
  
/* Überschrift, Absatz */  
  
h2 {  
margin-left: 10px;  
}  
-->  
</style>  
  
</head>  
<body>  
  
<div id="wrapper" class="clearfix">  
     <div id="header">  
          <h2>header</h2>  
     </div>  
     <div id="leftCol">  
          <!--<div id="blueBox">-->  
          	<h2>leftCol</h2>  
          <!--</div>-->  
     </div>  
     <div id="rightCol">  
          <h2>rightCol</h2>  
     </div>  
     <div id="centerCol">  
          <h2>centerCol</h2>  
     </div>  
</div>  
  
</body>  
</html>

Nur wird die Box nur so hoch angezeigt wie der Inhalt ist.

Kann mir jemand weiterhelfen?

Danke

Gruß
Markus

Beitrag melden
–
Informationen zu den Bewertungsregeln