Div 100% Höhe

D

Dimenson

Erfahrenes Mitglied
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

HTML: 
<!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:

CSS: 
@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
 
In diesem Fall lautet die Höhenregelung für #wrapper analog zu <html> u. <body>.

CSS: 
#wrapper {
...
/*min-height: 100%;*/ /* Mindesthöhe für moderne Browser - auskommentiert */
/*height:auto !important;*/ /* Important Regel für moderne Browser - auskommentiert */
height:100%;
...
}
 
Zuletzt bearbeitet:
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:

HTML: 
<?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
 
Zuletzt bearbeitet:
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
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück