DIV vertikal ausfüllen

[dundanox]

hallo leute, ich steh hier vor einem Problem, bei dem ich nicht mehr weiterkommen. Habe mir einige topics angeschaut, aber nirgends zumindest ein ähnliches problem gefunden, das mir weiterhelfen könnte.

Und zwar habe ich ein DIV, in dem sich zwei andere DIVs befinden, also etwa so

<div class="box">
   <div class="title">Title<div>
   <div class="content">content</div>
</div>

Das Schöne bei DIVs ist, dass sie sich horizontal ausfüllen. D.h. die Breite des Elternelements (class=box) ist egal. Ich möchte aber nun, dass sich das Content-DIV auch vertical ausfüllt. bei beliebiger Höhe des Elternelements.
Wenn ich die Höhe des Content-DIVs auf 100% (height:100%) stelle, dann ragt dieses DIV aber genau um die Höhe des Title-DIVs heraus.

Weißt jemand, wie man so eine vertikale Ausfüllung erreichen kann?

mfg dundanox

[Falk Prüfer]

Hallo dundanox,

...Das Schöne bei DIVs ist, dass sie sich horizontal ausfüllen. D.h. die Breite des Elternelements (class=box) ist egal.

Das hat nichts mit dem div-Tag zu tun, das ist bei allen Block-Elementen so.

...Ich möchte aber nun, dass sich das Content-DIV auch vertical ausfüllt. bei beliebiger Höhe des Elternelements.

Das ist das Standardverhalten eines div-Tags. Das Elternelement ("box") wird immer genauso hoch sein, wie "title" und "content" zusammen.

Im übrigen sollte man einen "Title" auch als solchen auzeichnen, also als h1, h2, hn und nicht als div!

Gruß Falk

[dundanox]

Dass sich das Elternelement automatisch anpasst ist mir klar. D.h. wenn sich - bei fester (unbekannter) Höhe des "Title" - die Höhe vom "Content" verändert sich das Elternelement sich dem entsprechend anpasst. Ich will es aber gerade anders herum haben. Und zwar gebe ich dem Elternelement "box" eine feste Größe und das "content" soll sich dann immer anpassen.

[Falk Prüfer]

Hallo dundanox,

... bei beliebiger Höhe des Elternelements.

...Und zwar gebe ich dem Elternelement "box" eine feste Größe und das "content" soll sich dann immer anpassen.

Was nun? Erst beliebige, dann doch feste Größe.

...Ich will es aber gerade anders herum haben. Und zwar gebe ich dem Elternelement "box" eine feste Größe und das "content" soll sich dann immer anpassen.

Wofür soll das gut sein? Wenn "box" eine feste Größe hat, dann kannst du "content" doch einfach auch eine feste Größe geben.

Gruß Falk

[dundanox]

Dem "content" kann ich ja gerade keine feste Größe geben, da ich nicht weiß wie hoch das "title"-Element ist. Deswegen soll "content" sich auch bei beliebiger festgelegter Höhe vom Elternelement "box" den freien Bereich komplett ausfüllen.

Sorry für das Durcheinander mit fest und beliebig. Es geht eben darum dass ich dem Elternelement eine Höhe zuweise und nicht dem "content", so dass sich das "Content" anpasst und nicht anders herum.

Als Beispiel mit "<table"> würde ich es so machen:

<table height="600" border="1">
	<tr>
		<td class="title">Title mit beliebiger (unbekannter) Höhe</td>
	</tr><tr>
		<td class="content" height="100%">Content, dass den freien Bereich kommplett ausfüllt</td>
	</tr>
</table>

Abgesehen davon, dass man mit table nicht layouten sollte (was hier aber eine ganz andere geschichte ist). würde es mit der div-Variante "besser" aussehen und hätte weniger tags

<div class="box">
   <h1>Title</h1>
   <div class="content">content</div>
</div>

Ich hoffe es ist jetzt klarer, was ich erreichen will. Das Problem ist, dass ich dem "content" keine 100%-Höhe zuweisen kann, da es sich dann auf das Elternelement beziehen würde und somit genau um die Höhe vom "title" zu viel wäre und dann herausragt.

[Falk Prüfer]

Hallo dundanox,

...Wofür soll das gut sein?...

Ich stelle diese Frage nicht weil ich deine Motivation in Zweifel ziehe, sondern weil ich dir evtl. eine alternative Lösung anbieten will. Das was du machen willst geht schlicht und ergreifend nicht, weil es keinen Sinn macht.
Also was bezweckst du eigentlich? Einen Rahmen? Ein Hintergrundbild?

Gruß Falk

[dundanox]

Das ganze soll dabei so eine Art Box oder Fenster Modell werden. Dem "content" würde ich per CSS dann die Eigenschaft "overflow:auto" zuweisen. Für das Horizontale funktioniert es prima. Wenn ich dem "content" aber keine Höhengrenze festlege, dann wächst der "content"-block vertikal immer weiter an. Sobald dann der untere Rand vom Elternelement, dessen Höhe vorgegeben/festgelegt ist, erreicht wird, wird der Rest vom "content" einfach abgeschnitten.
Stattdessen könnte man dem Elternelement die Eigenschaft "overflow:auto" zuweisen. Das Problem dabei ist, dass dann das "title" mitgescrollt (oder wie soll man das nenen) wird. Ich will aber, dass man "title" immer oben sichtbar ist.

Anwendungsbeispiel (nur als Beispiel gedacht!!!):
Man will z.B., dass der obere Bereich dieser Seite (Logo + menu) immer oben sichtbar ist, wenn man durch die Antworten scrollt. Wobei das Elternelement (hier dann BODY) keine feste Höhe hätte. Naja, stellen wir uns vor die Seite hätte auch einen sehr wichtigen footer, der auf jeden Sall auch immer sichtbar sein soll und dabei immer am unteren Rand platziert ist. Dann müsste man dem BODY eine 100% Höhe zuweisen und "content" müsste dann den freien Bereich ausfüllen.
So oder so ähnlich habe ich mir die Wirkungsweise meiner Idee gedacht.

Im Grunde ist das wie bei jedem Browser (und vielen anderen Programmen). Man hat ein Fenster mit Titelleiste, Toolbar, Adressbar, Statusbar, etc, die alle eine bestimmte Größe/Höhe haben aber auch veränderbar sind. Der Anzeigebereich passt sich dann aber immer - der freien Fläche/Höhe - an.

[Falk Prüfer]

Hallo dundanox,

so wie du dir das vorstellst wird es mit reinem CSS nicht funktionieren. CSS sieht keine Formatierung ala "SoGrossWieDerVerfügbarePlatz" vor.
Du wirst also Kompromisse machen müssen.

1. Du vergibst für alle Elemente feste Höhen
2. Du formatierst die Höhe des "content" mit JavaScript
3. Der "content" hat eine feste Höhe und die "box" passt sich je nach "title" an

Ich persönlich würde 3. favorisieren. Für den Nutzer ist es im Endeffekt nicht (oder kaum) ersichtlich (und evtl. auch nicht wichtig) ob nun die "box" oder der "content" eine feste Höhe haben. Das entspricht zwar nicht ganz dem Verhalten eines "Desktopfensters", aber HTML ist nunmal keine Programmiersprache.
Alternativ kann man natürlich auch 3. mit 2. kombinieren.

Gruß Falk

[dundanox]

hmm, schade, dass es so eine Formatierung nicht gibt. Bei Tabellen scheint es ja irgendwie zu funktionieren, wobei das was mit HTML bzw. der Verarbeitung vom Browser zu tun hat. Ist denn da bei CSS3 (oder evtl. in weiterer Zukunft) irgendwas in die Richtung geplant, weiß man schon was. Hatte versucht mehrmals beim W3C zu gucken, was so die einzelnen Versionen von CSS (und andere Sprachen) so bieten. Blick da aber nicht wirklich durch.

Naja, werde dann wohl die ein oder anderen Kompromisse eingehen müssen.

Vielen Dank für die Antworten!

[Thomas Wiesseckel]

So weit ich mich erinnere ist da wirklich etwas geplant - aber bis das dann wieder überall läuft...

[Efchen]

Moin,

ich möchte noch einen Kommentar loswerden, um Deinem Verständnis von HTML noch etwas auf die Sprünge zu helfen (und weil ich weiß, dass sehr viele da Nachholbedarf haben).

<div class="box">
   <div class="title">Title<div>
   <div class="content">content</div>
</div>

Du weißt, dass Dein "div.title" keine Überschrift ist?
HTML ist eine Strukturbeschreibungssprache. Mit HTML wird die logische Bedeutung des Inhalts ausgezeichnet. Alles in divs zu packen ist sinnfrei und nicht im Sinne von HTML.
Insbesondere bei Umsteigern von Tabellenlayouts nach CSS-Layouts ist zu beobachten, dass diese Leute sich einen Ast abbrechen, um CSS zu lernen, aber den Sinn von HTML noch nicht verstanden haben.
Das oben ist natürlich nur ein Beispiel, so wies da steht ist es allerdings sinnfreie div-Suppe, die aus Sicht von HTML um keinen Deut besser ist, als Tabellenlayout.

Das wollte ich nur mal anmerken, wenn Dir das bewusst ist, betrifft es Dich ja nicht, anderen Mitlesenden gebe ich vielleicht den entscheidenden Verständnistipp.

Grüße,
-Efchen