div-Element mit 100% Höhe …

[Ranmaru]

Moin,

ich bastle gerade an einem Homepage-Design und stoße immer wieder auf das Problem, daß man ein div-Element scheinbar nicht über das gesamte Browserfenster in die Höhe ziehen kann, was aber für das Layout von großem Vorteil wenn nicht unerläßlich wäre.

HTML-Code:

<div id="container">
  <!-- weiterer Code -->
</div>

Code:

body { 
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Verdana, Tahoma, Helvetica, Sans-serif;
	font-size: 1em;
	background-color: #6f6f6f;
	color: #ffffff; }
#container {
	background-color: #1c1c1c;
	border-style: none solid;
	border-width: 1px;
	border-color: #000000;
	padding: 10px;
	width: 800px;
	height: 100%;
	margin: auto; }

Eigentlich sollte durch die height-Zuweisung im body- sowie div-Element mit der container-ID eine 100%ige Höhe möglich sein, meine Browser scheinen das jedoch nicht zu mögen und behandeln es immer wie height: auto;.
Getestet in Safari 2.0.4 und Firefox 2.0.0.1.

Nachtrag: wenn ich position: fixed; hinzufüge, dann hat der Container seine 100% Höhe, jedoch befindet er sich nicht mehr in der Mitte der Seite, wo er eigentlich hin soll.

Jemand 'ne Idee, was ich falsch mache bzw. ob das überhaupt möglich ist?

[mitaki]

Einige Browser sehen das html-Element als Referenz. Das bedeutet ganz einfach, dass du auch html eine Höhe von 100% geben musst.

[Ranmaru]

Mir war gar nicht klar, daß das html-Element überhaupt sowas wie CSS-Eigenschaften haben kann. Gut zu wissen.
Vielen Dank, es funktioniert.

[FF]

willst du damit sagen, das ich html nur noch height=100% geben muss, und height dunktioniert auch überall sonst? w00t, wieso wusste ich das ned schon vorher ._.

Mir war gar nicht klar, daß das html-Element überhaupt sowas wie CSS-Eigenschaften haben kann. Gut zu wissen.
Vielen Dank, es funktioniert.

...

Doch, so kannst du z.b. den Gesamten HTML Bereich aus dem Bildschirm Schieben, oder auf invisible stellen :P

[mitaki]

Mir war gar nicht klar, daß das html-Element überhaupt sowas wie CSS-Eigenschaften haben kann. Gut zu wissen.
Vielen Dank, es funktioniert.

...

Das html-Element zählt bei den meisten Browsern (an sich eine etwas verzwickte Sache der CSS Spec) als Wurzelelement der Darstellung. Daher ist es z.B. möglich das body-Element genauso flexibel zu gestalten, wie ein div-Element. Nur hat halt der IE6 auch im standardkonformen Modus noch Probleme damit, Stilangaben für body (width, Positionierung) zu verarbeiten. Der IE 7 ist da schon weiter.

willst du damit sagen, das ich html nur noch height=100% geben muss, und height dunktioniert auch überall sonst?

...

Jain. So lange in der Baumstruktur jedes Element eine festgelegte Größe besitzt ist immer eine Prozentangabe möglich. Fehlt aber ein Elternelement mit bestimmter Höhe wandeln sich alle Prozentangaben in auto um.

[NPC Fighter]

Mir war gar nicht klar, daß das html-Element überhaupt sowas wie CSS-Eigenschaften haben kann. Gut zu wissen.

...

Opera definiert dafür sogar ein Padding (oder wars Margin? Bin mir grad nicht ganz sicher) Attribut. Macht sich bemerkbar, wenn du versuchst, ein Element ganz oben / unten / links / rechts an den Bildschirm zu kleben. ^^

[mitaki]

Opera gibt dem html-Element im Gegensatz zu den anderen Browsern padding statt margin.
Man kann darüber streiten, welche Angabe nun sinnvoller ist^^

[FF]

es ist beides imo sinnlos, padding oder margin zu geben, wenn er nicht durch den autor der seite festgelegt ist...

Jain. So lange in der Baumstruktur jedes Element eine festgelegte Größe besitzt ist immer eine Prozentangabe möglich. Fehlt aber ein Elternelement mit bestimmter Höhe wandeln sich alle Prozentangaben in auto um.

...

Also gibt es keine gute Möglichkeit, z.b. ein Div über die ganze Seitenhöhe zu erstellen..... und feste Angaben sind auch schlecht, bei anderen Browsern, auflösungen, Monitoren usw....

[mitaki]

es ist beides imo sinnlos, padding oder margin zu geben, wenn er nicht durch den autor der seite festgelegt ist...

...

margin bzw. padding ist für html bzw. body vorvergeben, weil eine Webseite auch ohne Stilangaben lesbar sein soll. Nicht vorhandene Abstände würden nur den Lesefluss stören.
Du kannst es beliebig mit eigenen Stilangaben überschreiben und wenn dir das zu viel Aufwand ist, deine Probleme möchte ich dann haben.

Also gibt es keine gute Möglichkeit, z.b. ein Div über die ganze Seitenhöhe zu erstellen..... und feste Angaben sind auch schlecht, bei anderen Browsern, auflösungen, Monitoren usw....

...

Bitte nicht die Begriffe missverstehen. Eine feste Breite kann auch eine Prozentangabe sein, nur kann sich diese auf nichts beziehen, wenn das Elternelement keine feste (d.h. irgendeine Angabe außer auto [standard]) Höhe bzw. Breite besitzt.

[FF]

Du kannst es beliebig mit eigenen Stilangaben überschreiben und wenn dir das zu viel Aufwand ist, deine Probleme möchte ich dann haben.

...

Das weiß ich, aber imo sollte man eher die css angaben dafür zur pflicht erheben, als irgendwelche standardwerte vorzudeffinieren, die man dann wieder extra überschreiben muss...

Bitte nicht die Begriffe missverstehen. Eine feste Breite kann auch eine Prozentangabe sein, nur kann sich diese auf nichts beziehen, wenn das Elternelement keine feste (d.h. irgendeine Angabe außer auto [standard]) Höhe bzw. Breite besitzt.

...

Was festes ist für mich z.b. eine Pixelangabe, im gegesatz zu ner Relativen in %, die sich z.b. nach der höhe des Browserfensters richtet.

Aber k, ich hab jetzt schon verstanden, was du meinst^^

[mitaki]

aber imo sollte man eher die css angaben dafür zur pflicht erheben

...

Was genau meinst du damit? Dass alle internen Stilangaben nichtig gemacht werden sollten, wenn ein Autorenstylesheets verarbeitet wird?

Was festes ist für mich z.b. eine Pixelangabe, im gegesatz zu ner Relativen in %, die sich z.b. nach der höhe des Browserfensters richtet.

...

Pixel wären dann aber eher absolute Angaben^^
Meistens sag ich eh „bestimmte Breite/Höhe“ statt „feste Breite/Höhe“
Hauptsache, du hast es verstanden