RobGe: Browserhöhe zu 100% ausnutzen / DocType Fehler?

Beitrag lesen

SELF-Forum

Browserhöhe zu 100% ausnutzen / DocType Fehler?

RobGe
– Informationen zu den Bewertungsregeln

Hallo Community,
ich erstelle zur Zeit eine Internetseite. Diese enthält einen Container der zentriert im Browser erscheint. In diesem Container, der farbig hinterlegt ist, ist der gesamte Inhalt der Seite zu finden (sprich Header, Menü, Text und Footer).
Dieser Container soll die gesamte Höhe des Browsers ausnutzen, was er aber nicht tut.
Stand der Dinge:
So soll es nicht sein

So ist es eigentlich geplant:
So soll es sein

Dazu mal mein Code:

  
body  
{  
         margin: 0;  
         padding: 0;  
         height: 100%;  
}  
  
#container  
{  
         background-color: #aeaeae;  
         width: 900px;  
  
         min-height: 100%;  
         height: auto !important;  
         height: 100%;  
         /* overflow: hidden !important; */  
  
         margin: auto;  
         padding: 0;  
         position: relative;  
}  
  
#header  
{  
         width: 900px;  
         height: 200px;  
}  
  
#menu  
{  
         position: absolute;  
         top: 275px;  
         left: 70px;  
         margin: 0px;  
         width: 200px;  
}  
  
#content  
{  
         margin-left: 300px;  
         padding-bottom: 30px;  
         width: 500px;  
         clear: both;  
}  
  
#support  
{  
         margin-left: 300px;  
         width: 500px;  
         position: relative;  
}  
  
#footer  
{  
         margin: 20px;  
         text-align: center;  
}  


  
<!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>  
         <link rel="stylesheet" href="style.css" type="text/css"  
  
media="screen">  
</head>  
  
<body>  
<div id="container">  
         <div id="header"> </div>  
         <div id="content">  
                 <h3>&Uuml;berschrift</h3>  
                 ganz viel text ganz viel text ganz viel text ganz viel text  
         </div>  
         <div id="support">  
                 <h3>&Uuml;berschrift 2</h3>  
                 noch mehr text noch mehr text noch mehr text noch mehr text  
  
                 <div id="footer">&copy; 2011 ...</div>  
         </div>  
  
         <div id="menu">  
                 Ganz viele Links  
         </div>  
</div>  
</body>  
  
</html>

Jetzt ist mir dabei etwas aufgefallen. Wenn ich nämlich die doctype Zeile in meinem HTML Code lösche, erscheint die Seite genau so wie gewünscht. Das heißt so wie auf dem zweiten Bild dargestellt.
Das kann ja aber nicht die Lösung sein!?!?
Was habe ich falsch gemacht bzw. was muss ich verändern, damit alles einwandfrei funktioniert und die Doctype Zeile stehen bleiben kann?
Viele Grüße
Rob

Beitrag melden
–
Informationen zu den Bewertungsregeln