CSS Div height: 100%
Ein DIV dem die Höhe 100% {height: 100%;} zugewiesen wurde erscheint nicht über den gesamten Bildschirm, sondern erstreckt sich nur soweit, wie sein Inhalt reicht. Hier lernen Sie, wie man dieses Problem löst:
HTML Datei
<head><title>Titel des Dokuments</title></head>
<body>
<div id="wrapper">
<p>Inhalt</p>
</div>
</body>
<html>
Wie man es nicht macht:
CSS Datei: Anzeigebeispiel
background-color: #333333;
}
#wrapper {
height: 100%;
background-color: #ffffff;
width: 80%;
margin: auto
}
Häufig findet man obigen Codeschnipsel mit der Frage verbunden, weshalb der Firefox und andere moderne Browser die Höhe des DIVs nicht richtig darstellen würden. Der Internetexplorer reagiert auf diese CSS Anweisungen in der Tat so, wie die Fragenden sich das vorstellen. Er erstreckt die Höhe des Divs auf die komplette Bildschirmhöhe.
Auch, wenn es für viele nicht so scheint: Firefox und Co. verstehen die Anweisung richtig, der IE deutet - wie so oft - etwas falsch. Die prozentuale Höhe eines Elementes ist nämlich abhängig von dessen Elternelement, in unserem Fall also dem BODY. Da diesem aber gar keine Höhe zugewiesen wurde, kann sich das DIV nur so weit ausdehnen, wie es mit Inhalt gefüllt ist. Die Wirkung entspricht der des Befehls {height: auto;}.
Wie man es richtig macht:
CSS Datei: Anzeigebeispiel
background-color: #333333;
margin: 0;
padding: 0;
height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
}
#wrapper {
background-color: #FFFFFF;
width: 80%;
margin: auto; /* Div soll zentriert werden */
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
overflow: hidden !important; /* FF Scroll-leiste */
}
Die prozentuale Angabe der Höhe eines DIVs orientiert sich am darüberliegenden Element. In den meisten Fällen ist dies der "BODY" einer Website. Daher muss zunächst auch dem BODY eine Höhe von 100% zugewiesen werden.
Will man das DIV mit seitlichem Abstand zentriert auf der Website darstellen, hilft einem die Zuweisung eines {margin: auto} weiter. Damit das ganze im Beispiel unten erkennbar wird, habe ich dem BODY eine dunkle Farbe (#333333) und dem DIV mit der ID "wrapper" einen weissen Hintergrund (#ffffff) gegeben.
Jetzt geben wir dem DIV die Höhenangabe. Zunächst sagt man den modernen Browsern, dass das DIV sich über mindestens 100% erstrecken soll {min-height: 100%;}.
{Height: auto !important;} sorgt mit Hilfe der !important Regel dafür, dass die Höhe des Divs nicht vom nachfolgenden {height: 100%;} überschrieben wird.
Die Angabe {height: 100%;} ist nur für den Internet-Explorer vorhanden und gibt diesem - wie eingangs bereits erwähnt - die gewünschte Anweisung. So erstreckt sich das div browserübergreifend über die komplette Höhe der Seite.
Wenn jetzt aber der Inhalt der Seite über den Anzeigenbereich hinausgeht und eine Scrollleiste erscheint, erstreckt sich das DIV, sobald man nach unten scrollt nicht mehr bis zum unteren Bildschirmrand. Die kann man durch die Anweisung {overflow: hidden} unterbinden. Die !important Regel sorgt auch hier wieder dafür, dass der IE diese Anweisung nicht versteht.
Kommentare
:)
vielen dank!
also hab das ganze eingesetzt in einem joomla template und funktioniert super. endlich 100% höhe.
Habe nur ein Problem:
sobal ich jcomments einsetze überlagern sich die kommentare sowohl im safari als auch ff. geb ich zum testen position absolute oder fixed dazu sind die kommentare untereinander, höhe 100% geht aber nicht mehr.
mach ich nicht absolute oder fixed, kann man die comments nur im IE lesen.
weiß jemand vielleicht rat?
wäre echt supi =)
danke
Hier mal mein template: nopaste.php-quake.net/275822
Vielt hat ja jem Rat?!
Danke!
wenn du die Tipps aus diesem Tutorial richtig befolgst bekommst du die 100% Höhe des Templates.
Ich kann die CSS zuordnung nur vermuten, aber du musst html und body die 100% höhe geben und dem div container dann die css befehle von unserem #wrapper. dann sollte es funktionieren.
aber wie gesagt: ich glaube, dass du dem falschen div die CSS Befehle zugeordnet hast. html und body auf 100 bzw. 101% und dann dem div#container die css befehle unseres wrappers im beispiel.
ein link zur seite wäre ebenfalls hilfeich.
hab aber das problem das mein content bereich einen rahmen hat, wo die seiten aus bildern bestehen, die nach unten gekachelt werden.
wenn es über den viewport geht, wächst der content dank des workaround mit aber wie schaff ich das für die 2 änderen layer?
Gruß und Danke für die Aufmerksamkeit ;)
dein problem hat, ähnlich wir das von chris, nichts oder sagen wir mal wenig mit der gesamthöhe des templates zu tun, sondern bezieht sich auf die gleiche höhe der spalten im template. der hintergrund oder der rahmen der 2 bzw. 3 spalten soll sich immer der höhe der höchsten spalte anpassen und so "bis unten" durchgezogen werden.
vllt. schreibe ich dazu auch mal ein tutorial. da ich aber momentan kaum zeit habe, müsst ihr euch mit diesen links begnügen:
ich benutze häufig eine methode, die dieser hier sehr ähnlich ist:
tutorials.de/.../...
grds. in diesem zusammenhang sehr lesenswert: faux columns: alistapart.com/.../fauxcolumns (englisch)
Vielen Dank!
Grüße
Diese Lösung habe ich jetzt drei Stunden lang gesucht und NUR HIER gefunden!
Danke
Danke
Super Lösung funktioniert auch im IE6!!!
@Manne: So müsste es gehen…
Quelle: xhtmlwiki.de/.../
Jap! ich habe das selbe Probleme…
[maincontent]—-> height 100%! works!
[header]
[/header]
[content]—> muss so groß sein wie das fenster
[leftcolumn]
[/leftcolumn]
[Rightcolumn] die Inhalt mach alles kaputt, ich also probiere die overflow: auto, aber nicht..
[/Rightcolumn]
[/content]
[footer]—>
[/footer]
[/maincontent]
Ich kann auch mit PX arbeiten, aber FF verstehe A und Chrome A+2… und es muss genau sein wie die Fesnter…
Wie konnte ich das Fixed?
die td's sind variabel, je nach menge des Inhalts.
habe es mal probiert aber im IE8 geht das bei mir so nicht mehr, kann das sein?
DAs mit dem Div funktioniert super. Danke fuer den super Tipp. Nun zu meinem Problem. Ich habe ein maindiv, dass alle Elemente beinhaltet. Dieses erstreckt sich nun auch über 100% höhe. (mit dem oben stehenden code erreicht). Nun habe ich zuoberst einen Header in dem sich ein bild befindet und nach dem Header die navigationsleis te. Jetzt möchte ich, dass das am schluss folgende iframe, sich auf 100% erhöt. Sprich, immer die vollge Höhe zwischen navigationsleis te und unteren bildschirm rand erstreckt. Dies gehd aber irgendwie nicht.. ich habe es auch mit dem oben erwähnten code versucht. Geht das mit iFRames überhaupt nicht? Oder muss ich für den Header und die Nav.leiste was anpassen?
Vielen Herzlicken Dank!
Hier gibts ein Beispiel:
xs4all.nl/.../csslayout1.html
wieso muss ich auch noch den body auf 100% stellen?
langt da html 100% nicht alleine ?
erstmal danke für den Tutorial, die Höhe klappt auch echt super, aber geht das auch mit der Breite? Habe oben einen Banner und wenn mein Fenster in der normalen Ansicht ist, passt alles. Wenn ich es minimiere, dann bekomme ich nen weißen Rand.
Wenn man diesem Tutorial hier folgt (es ist eins der wengen guten), klappt es 100%ig.
Weiss da jemand eine Lösung?
Ich habs so gemacht: html, body: height 100%
wrapper: heigt 100%
div links und recht: jeweils genau die Angaben, die hier im wrapper stehen.
Schreibe ich die Angaben, die hier im Wrapper stehen, auch in meinem Wrapper, funktioniert garnix mehr!
Lg TF
rechtschreibung
@werner: height schreibt man mit "h" ;-)
Mein "Problem" habe ich nicht zufriedenstelle nd lösen können, habe also als "workaround" nun die Seiten so gekürzt, dass einfach nix mehr über 100% hinausgeht…
Lg TF
Folgende Situation:
html, body 100%, dann #pagewidth 100%, dann header height:141px;, dann #leftcol 100%, darin mehrere Divs mit fixes Größen und zuletzt soll ein Div kommen mit weiteren 100%, die über background repeat y die linke Leiste ausfüllt (ich habe darüber ein Verlaufsmuster, deswegen kann ich das nicht per se als Hintergrund setzen).
Er zeigt mir aber immer nur einmal die Grafik an, die gekachelt sein sollte. Wenn ich jetzt den #leftcol auf z.B. 2000px setze, funktioniert es. Nur auf 100% komischerweise nicht.
Irgendeine Idee wo ich suchen muss?
Gruß und Danke,
Alex
Aber ich habe ein Problem… Ich möchte meinem div jetzt noch ein padding vergeben. Da sich die Divs ja ausbreiten bei padding, kommt eine Scrollleiste dazu, was ziemlich unschön ist… Gibts da was dagegen?
Pack ein div mit margin rein:
Text
Ich versuchs mal zu umschreiben ;)
einfach zusätzlich ein div mit z.B. style="margin: 5px" rein und da kann dann dein inhalt rein.
Super, dankeschön :-)
Nach ein paar Minuten hatte ich auch die Lösung, danke :-)
Hätte man zwar (wie so oft :)) selber drauf kommen können, aber na ja..
LG,
benni
von mir ein kurzes Dankeschön zu dieser Anleitung. Befolgt man diese korrekt, klappt's auch mit etwas komplizierteren Designs.
Anmerkung: Diese Anleitung hat nix damit zu tun mehrere Spalten (leftbar - center - rightbar) auf eine Höhe zu bringen. Aber da wurde ja hier schon auf die richtigen Seiten (alistapart.com) verwiesen.
Lorenzo
#blackout
{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8);
position: fixed;
z-index: 1;
}
Wobei z-index: 1; nur dann wichtig ist, wenn ihr wirklich was überlappen wollt, aber dann müsst ihr auch den untergeordneten elementen dementsprechend weniger z-index geben!
Grüße,
Sebastian
Jetzt habe ich meine Mail-Form fast fertig!
jsfiddle.net/jkostik/ZmeFB/
Seit 4 h quäle ich mich herum, um dieses Problem zu lösen und war kurz vor der Aufgabe. Und dann finde ich das hier. Vielen Dank für die das Tutorial.
Dirk
ich beginne gerade html zu lernen und kann noch kein css. Daher meine Frage wie kann ich nur mit html die div-Box auf die komplette Fensterhöhe anpassen?
Hier mein html-code.
Danke,
Alex
!doctype html>
.box1
{
width:480px;
height:100%;
background-color:#CCCCCC;
margin:0px auto;
padding:auto;
color:#745e3d;
border:#fff 0px solid;
position:relati ve;
}
Test
in div id="seite" container pach einfach beine komplette seite
DIV für header, main, sontent und footer.
//CSS
#seite {
background-color: #999;
width: auto;// das ist automatische breite
}
vielen Dank für diese Anleitung! Ich bin gerade dabei meine Seite zu optimieren und habe festgestellt, dass Tabellen als Layout Mittel mittlerweile ziemlich veraltet sind.
Mit dieser kleinen aber feinen Anleitung habe ich eine vermeintlich komplizierte Sache schnell und einfach gelöst!