Ich versuche, eine div auf meiner Seite. Sie sollte nur relative Werte verwenden, so dass ihre Größe nur von der Fenstergröße abhängt.
Ich habe eine Lösung gefunden, die das Feld zentriert, aber es scheint, dass der Rand nicht korrekt berechnet wird. Stattdessen wird die Größe des body wird größer als das Fenster. Im folgenden Beispiel sagt mir Firebug, dass die Box #container hat auf meinem Bildschirm die Größe 1265x335. Beim Prüfen #content seine Größe ist 506x134 und 2px Rand auf jeder Seite, die meine Berechnung entspricht. Aber der obere Rand ist 316.
Habe ich etwas falsch verstanden?
Die Marge sollte 25 % von 335 betragen, richtig?
Wie kann ich das beheben?
Hier ist der HTML-Code:
<body>
<div id="container">
<div id="content">
nothing...
</div>
</div>
</body>Und hier der CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0em 0em 0em 0em;
}
#container {
height: 100%;
}
#content {
text-align: center;
width: 40%;
height: 40%;
margin-top: 25%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
border: 2px solid black;
}
