nicht angemeldet
Browserhöhe zu 100% ausnutzen / DocType Fehler?
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 ist es eigentlich geplant:
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>Überschrift</h3>
ganz viel text ganz viel text ganz viel text ganz viel text
</div>
<div id="support">
<h3>Überschrift 2</h3>
noch mehr text noch mehr text noch mehr text noch mehr text
<div id="footer">© 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
-
Hi,
body
{
margin: 0;
padding: 0;
height: 100%;Die übliche Frage: 100% von \*was\*? > 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. Stichwort: Quirks Mode. > Das kann ja aber nicht die Lösung sein!?!? Nein, ist es nicht. MfG ChrisB -- RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Ah OK,
den Quirks Mode kannte ich vorher leider nicht. Aber vielen Dank für den Hinweis.Das mit dem "height: 100%;" habe ich vorher in mehreren Foren gelesen. Daher dachte ich, dass das regelkonform sei. Heißt also, dass ich das nicht so machen sollte, ja? =)
Gibt es denn überhaupt eine Möglichkeit das Problem mit HTML/XHTML zu lösen oder müsste ich dafür php bzw. javascript einsetzen?
Viele Grüße
Rob-
Yerf!
Das mit dem "height: 100%;" habe ich vorher in mehreren Foren gelesen. Daher dachte ich, dass das regelkonform sei.
Ist es auch. Du solltest nur dem anderen Hinweis von ChrisB noch nachgehen.
Tipp: es wird gern übersehen, das <body> noch ein Elternelement hat...
Gruß,
Harlequin
--
RIP --- XHTML 2
nur die Besten sterben jung-
AAAAHHHHHHHHHHH,
jessa.html{ height: 100%; }Sone kleine Zeile ^^ Ich danke euch! =)
Jetzt wäre da nur noch eine klitze kleine Kleinigkeit.
Wie bekomme ich den Footer nach ganz unten?
Ich habe gelesen, das ich das durchposition: absolute; bottom: 0;gelöst bekomme. Dazu müsste ich meinen Footer aber aus dem "support"-div nehmen. Der nachteil ist aber, das er dann horizontal gesehen nicht mehr unter dem "support"-div ist, wo ich ihn gerne hätte.
Gruß,
Rob-
Yerf!
Dazu müsste ich meinen Footer aber aus dem "support"-div nehmen.
Nicht, wenn du auf das position:relative verzichten kannst. Ansonsten einfach den Margin des support-divs auch auf den Footer anwenden um ihn zu positionieren (oder eine left-Angabe)
Gruß,
Harlequin
--
RIP --- XHTML 2
nur die Besten sterben jung-
Yerf!
Dazu müsste ich meinen Footer aber aus dem "support"-div nehmen.
Nicht, wenn du auf das position:relative verzichten kannst. Ansonsten einfach den Margin des support-divs auch auf den Footer anwenden um ihn zu positionieren (oder eine left-Angabe)
Gruß,
Harlequin
Hey Harlequin,
also ich habs mal versucht indem ich "position: relative" beim "support"-div raus nehme. Das Problem was so oder so auftritt ist, das sich das "position: absolute" vom footer mit dem "position: absolute" vom Menü überschneidet. Dadurch wird der Footer falsch positioniert. Wenn ich "position: absolute" vom Menü lösche sitzt der Footer zwar korrekt, aber das Menü natürlich nicht.
Jemand ne Idee was ich gegen diesen Konflikt machen könnte?
Viele Grüße,
Rob
-
-
-
-
-