# Div 100% Höhe



## Dimenson (24. März 2012)

Hallo Leute,

leider habe ich ein Problem, und zwar ich versuche eine kleines Design zu erstellen mit Div Containern. Leider funktioniert dies nicht so wie ich mir das vorstelle. 

Ich versuche einen Div Container innerhalb eines anderen Div Container auf 100 % Höhe zubringen leider klappt dies nicht. 

Hier mal mein Html Code


```
<!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=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="wrapper">
	<div id="header">
    Dies ist ein Test
    </div> <!-- Div End Header -->
    
    <div id="navigation">
    
    </div> <!-- Div End navigation-->
   
    <div id="content">
    
    </div> <!-- Div End content -->
    
    <div id="footer">
    
    </div> <!-- Div End footer -->
    
</div> <!-- Div End Wrapper -->
</body>
</html>
```

Hier noch die CSS Datei:


```
@charset "utf-8";
/* CSS Document */
html {	
height: 100%;
}

body {
margin:0px auto;
padding:0px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;	
height: 100%;
}

#wrapper {
background-color: #0d1256;
width: 80%;
margin: auto; /* Div soll zentriert werden */
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
overflow: hidden !important; /* FF Scroll-leiste */ 
}

#header {
width:1000px;
background:#3F6;
min-height:100%;
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
}
```

Also im Endeffekt möchte ich gerne den grünen header mal auf 100% Höhe. Dies dient einfach zum verständnis.
Steh ein bißchen auf den Schlauch, ich bitte um Rat.

Vielen Dank


----------



## SpiceLab (24. März 2012)

In diesem Fall lautet die Höhenregelung für *#wrapper* analog zu *<html>* u. *<body>*.


```
#wrapper {
...
/*min-height: 100%;*/ /* Mindesthöhe für moderne Browser - auskommentiert */
/*height:auto !important;*/ /* Important Regel für moderne Browser - auskommentiert */
height:100%;
...
}
```


----------



## Dimenson (25. März 2012)

Hallo,

vielen Dank, das hat mich erstmal weiter gebracht. Allerdings stehe ich nun vor den nächsten Problem.

Und zwar habe ich nun eine Seite erstellt mit header,navigation, content und footer. Es funktioniert soweit eigentlich ganz gut. Allerdings hat die navigation Fehler. Ich möchte gerne das die Navigation immer 100%ig an den Footer anschließt. Funktioniert leider nicht. Eigentlich noch schlimmer sobald ich weniger Content habe überlappt sich das ganze. 

Hier könnt ihr mal reinschauen und vllt verstehen was ich meine:
http://www.d-maschke.de/testdiv/index.php?load=home

Hier mein HTML Code:


```
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
$header
<link rel="icon" type="image/png" href="/icon.png" />


<style type="text/css">
html {     
height:100%;
     }

	
body  { 
margin:0px auto;
padding:0px;	
	background-image:url("img/hintergrund2.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
	height: 100%;	
}

a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #666;
}
a:link {
	text-decoration: none;
	color: #0F0F8B;
	   
}
a:visited {
	text-decoration: none;
	color: #0F0F8B;
}
a:hover {
	text-decoration: none;
	color: #54B1FF;

}
a:active {
	text-decoration: none;
	color: #0F0F8B;

}

.weissnavi {
	background-image:url("img/weiss.png");	
}

#banner_1 {
clear:both;
height:100px;
background:#ddd;
}

#wrapper {
background-color: #0d1256;
width: 1000px;
margin: auto; /* Div soll zentriert werden */
/*min-height: 100%; Mindesthöhe für moderne Browser */
/*height:auto !important; Important Regel für moderne Browser */


}

#header {
width:1000px;
background:#3F6;
height:232px; /* Mindesthöhe für den IE */
}

#navigation {

width:200px;
background:#993300;
min-height:100%;
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
position:absolute;
}

#content {
margin:0 0 0 220px;
width:780px;
background:#FF0000;
height:100%; /* Mindesthöhe für den IE */
}

#footer{
    width:1000px;
    height:40px;
    background:#4e4e4e;
    clear:both;

    bottom:0;
}



</style>
</head>

<body>


<div id="wrapper">     
      <div id="header">
          
     </div>
      <div id="navigation">
          
     </div>
     <div id="content">
         $content 
     </div>
     <div id="footer">
          
     </div>

</div>
</body>
</html>
```

Ich muss mich entschuldigen, das ist mein erstes projekt mit div containern. Habe damals immer Tabellen gearbeitet, möchte aber nun davon weg .

Vielen Dank


----------



## SpiceLab (25. März 2012)

AnyColumnLongest bietet unterschiedliche Lösungsansätze für dieses Problem.


----------



## Dimenson (26. März 2012)

Hallo,

ich habe mir mal die Seiten mal durchgeschaut. Leider ist mein Englisch nicht so gut. Ein Teil konnte ich mir doch irgendwie herleiten. Leider verwirrt mich die Seite ein wenig. Ich versuche es ja immer wieder reinzulesen. Aber ich bin so einer der muss testen und auch gleich es anfassen. Leider kenne ich mich in Sachen Div und Css zu wenig aus. 

Es würde mir sehr helfen wenn es irgendwie ein deutsches Tutorial geben würde.
Danke


----------



## SpiceLab (26. März 2012)

Byteshift Webdesign Berlin - Alistapart: Unechte Spalten (Faux Columns)

Deutsche Fassung für Solution B - the orthodox way - faux columns

Das hier genutzte Hintergrundbild würde im DIV *#wrapper* (wieder mit Mindesthöhe versehen, und *#navigation* ohne Höhenregelung ausgestattet!) die Spaltenhintergründe erzeugen.

Anmerkung: um die vorgestellten Quellcodes in eine Testseite zu portieren, ist die englische Sprache  nicht gefragt.


----------



## djheke (27. März 2012)

Hier kannst du ja auch mal lesen.
Faux Column für fixe Layouts
Faux Column für flüssige layouts


----------



## Dimenson (29. März 2012)

Hallo,

erstmal Danke für die Beispiele.


----------

