martins blog

Privates Blog mit Fotos und mehr...

CSS für einen zentrierten Container mit 100% Höhe

Immer wieder steht man ja beim erstellen von xhtml-Seiten vor dem Problem, dass man zentriert einen Container haben möchte, der eine Höhe von 100% hat und der auch beim Scrollen wirklich bis zum Ende der Seite geht.

Das Klappt mit der Angabe von height:100% und min-heigt:100% alleine allerdings nicht besonders gut wenn man verschiedene Versionen von IE und Firefox verwendet.


Mit diesem CSS sollte es besser klappen:

<style type=“text/css“>
<!–
html, body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
height: 100%;
}

html>body #container {
height: auto;
min-height: 100%;
}

#container {
width:600px;
height: 100%;
text-align: left;
background-color:#CCCCCC;
padding: 0px;
margin: 0 auto 0 auto;
}
–>
</style>

Erfolgreich getestet in Internet Explorer 5.5 + 6 + 7, Mozilla Firefox 1.5 + 2, Opera 8 + 9,Epiphany, Galeon

Die Komplette Datei:  xsl+css: 100% height auch beim scrollen

Weiter Beitrag

Zurück Beitrag

Antworten

© 2022 martins blog

Thema von Anders Norén