Zur Navigation

Zentrieren + height=100%

1 Halvor (Gast)

Hallo!
Ich möchte eine mit CSS erstellte Seite, die eine absolute Breite vonn 800px hat, zentrieren. Allerdings soll die Seite immer 100% hoch sein, auch wenn nicht soviel Inhalt drin steht und unten etwas leer bleibt. Ich habe es jetzt so versucht, dass ich einen div auf die Seite lege, in den alle anderen Elemente kommen, und den auf margin:auto gestellt. Dadurch funktioniert aber die 100%-Höhe nicht mehr. Kann mir jemand helfen?

Halvor

06.11.2006 15:57

2 Jörg Kruse

Hallo Halvor,

wenn du z.B. so ein div innerhalb von body hast:

<body>
<div id="content">
Inhalt der Seite
</div>
</body>

... könntest du es folgendermaßen zentrieren:

html, body {
height:100%;
margin:0;
padding:0;
}
#content {
width:800px;
height:100%;
margin:0 auto;
border:solid 1px black;
}

Je nach Doctype müssen auch html und body eine Höhe von 100% aufweisen, damit der darin enthaltene Container eine entsprechende Höhe ausfüllen kann

06.11.2006 16:10

3 Halvor (Gast)

Vielen Dank! Genau das wars!

Gruß!
Halvor

06.11.2006 20:33

4 Halvor (Gast)

Hallo!
Die Zentrierung hats getroffen, aber nun gehts weiter mit den 100%-Problem:
Ich habe mit CSS ein "Frameset" aufgebaut, also oben einen Banner mit 100px Höhe. Darunter links ein absolut positioniertes Menü und dann natürlich der Inhaltframe, ebenfalls absolut positioniert. Das Ganze liegt wie oben besprochen in einem "content-div", der das Ganze zentriert.
Der "Content-div" füllt eigentlich auch 100% der Seite. Die darin liegenden divs (Menü und Hauptframe) sollen ebenfalls bis zum unteren Seitenrand reichen (wegen Hintergrund), fangen aber nicht am oberen Seitenrand an. Das Menü wird dadurch so lang, dass Scrollbalken angezeigt werden, obwohl es vom Inhalt her überhaupt nicht nötig ist.

Wie kriege ich es hin, dass beide "Frames" genau am Seitenende enden?

Halvor

06.11.2006 23:03

5 Jörg Kruse

Da würde ich dann andersherum vorgehen. Lass Menu-Bereich und Haupt-Bereich am oberen Seitenrand beginnen, dann kannst du sie auch 100% hoch ziehen, ohne, dass die Seite dadurch länger wird. Eine absolute Positionierung benötigst du dann für diese beiden Divs nicht. Den Inhalt und das Menu packst du jeweils in ein untergeordnetes Div, welches die Eigenschaft margin-top:100px; erhält. Du hast dadurch oben einen freien Platz von 100px Höhe über den du dann den Banner absolut positionieren kannst

06.11.2006 23:38

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]