✔ Height 100% will nicht

  • Themenstarter Themenstarter ByeBye 182971
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
B

ByeBye 182971

Hallo,

ich habe ein ziemlich ekelhaftes Problem mit CSS. Ich will, dass der Container 100% hoch ist. Gleichzeitig die Linke Navigation, die sozusagen aus 2 übereinander lappenden Divs besteht. Der ein soll nur ein Bild ganz unten sein.
Ich weiß nicht warum, aber irgendwie wollen die 100% Höhe nicht.

Hier mal die CSS:
Code: 
/* Powered by http://www.sbani.net */

body {
background-color: #010000;
margin: 0;
padding: 0;
text-align: left;
color: #ffffff;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
height: 100%;
}

#container {
position: relative;
width: 936px;
background: url(images/container_bg.png) repeat-y;
margin: auto;
padding: 0 20px;
min-height: 100%;
height:auto !important;
height:100%;
overflow: auto;
}

* html #container {
     height: 100%;
}

#header {
padding: 0;
margin: 0;
}

#navi {
background:transparent url(images/navi_links_bg.png) repeat-y scroll 0%;
float:left;
padding-right:35px;
padding-left: 10px;
width:195px;
text-align: center;
font-size: 18px;
color: #b93001;
min-height: 100%;
height:auto !important; /* moderne Browser */
height:100%; /* IE */
overflow: auto;
}

#navitop {width:160px;
min-height: 100%;
height:auto !important; /* moderne Browser */
height:100%; /* IE */
overflow: auto;}


#navitop ul {margin:0;padding:0;}
#navitop li, #navi .navigation {
	display: block;
	list-style-type: none;
	margin-bottom: 10px;
}
#navitop li a {color: #b93001; text-decoration:none;}

#navibottom {
background: url('images/navi_bottom.png') bottom no-repeat;
min-height: 100%;
height:auto !important; /* moderne Browser */
height:100%; /* IE */
overflow: auto;
}

#content {
position: relative;
background-color:#260E01;
float:right;
margin-right:40px;
text-align:left;
width:645px;
padding: 30px 0 0 10px;
min-height: 100%;
height:auto !important; /* moderne Browser */
height:100%; /* IE */
overflow: auto;
}

img {border:0;padding:0;margin:0;}

.clear {clear: both;
height: 0px;
margin: 0px;
padding: 0px;
border: 0px none;
line-height: 0px;}

die index.html
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="de">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="container">
	<div id="header">123 Header
	</div>	
	<div id="navi">
		<div id="navitop"><div id="navibottom">
		<span class="navigation">Navigation</span>
		</div></div>
	</div>
	<div id="content">
312 Content
	</div>
<div class='clear'></div>
</div>
</body>
</html>

Ich hoffe ihr könnt mir helfen. Wenn es nötig ist lade ich auch schnell die seite hoch.

Gruß und danke fürs helfen :)
 
Hallo,

du müsstest das HTML-(Wurzel-)Element in den Stylesheet berücksichtigen. Also:
Code: 
html, body {
    height: 100%;
    /* usw. usf */
}
/* usw. usf */
 
Danke für eure Hilfe. Es hilft auch bereits den #Container auf 100% zu strecken, aber die Navigationsleiste geht nicht mit!

Die Navi bleibt klein. Wie kann ich das ändern/hinbekommen?
 
Hi,

hierfür müsstest du das Konzept für die 100%-Höhe grundsätzlich umstellen.

Wie das konkret vonstatten geht, kannst du in meinem Tutorial CSS-Layout mit 100%-Höhe nachlesen, bzw. in den vier Beispiel-Varianten des angehängten ZIP-Archivs studieren.

mfg Maik
 
Danke Mike. Das ist genau das was ich gesucht habe. Ich stelle es erstmal auf erledigt und wenn doch was schief geht, schreibe ich nochmal.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück