Div soll umschließende Div voll ausfüllen

[cssneuling]

Hi
Auf der Seite Intern seht ihr ein angefangenes Div-Layout.
Die orange eingefärbte Div, in der 'Hallo' steht, soll sich höhenmäßig der div#head anpassen. height: 100%; zeigt jedoch keine Wirkung.
Was muss ich da verändern?

 

[prm]

Die 100% benötigen eine Basis, worauf sie sich beziehen.
Das nützt in dem Fall aber auch nichts.

Entweder gibst du den beiden sich nebeneinander befindenden Div's den gleichen Höhenwert, oder du müsstest mit Faux Columns arbeiten: Faux Columns

 

[Efchen]

Auf der Seite Intern seht ihr ein angefangenes Div-Layout.

Nur so als Anmerkung. Sowohl Tabellenlayouts als auch "div-Layouts" sind Unfug. Layout macht man gar nicht mit HTML, sondern mit CSS.
Bitte nicht nur einfach von einer unsinnigen Vorgehensweise auf eine andere unsinnige Vorgehensweise umsteigen, weil "mal einer gesagt hat"...

 

[cssneuling]

Wer sagt, dass es ein HTML Layout ist? In der HTML Datei stehen nur die Div-Tags, ohne irgendwelche Attribute mit Außnahme vom id-Attribut.
Sämliche Höhen,Breiten, Farben sowie float,clear usw. stehen in einer CSS-Datei.

@prm: Warum ist in diesem Fall die umschließende Div keine Basis für die orangene?

 

[prm]

Der #head kann durchaus eine Basis sein, z.B. so:

div#head {padding: 10px; height: 100px;}
div#heading {float: left; background: yellow; width: 70%; height: 100%;}
div#welcome{display: inline-block; background: orange; width: 30%; height: 100%;}

In diesem Fall haben #heading und #welcome 100% Höhe von #head und damit ebenfalls 100px.

Die Frage ist nur, ob dies sinnvoll ist:
In der Regel sind die Inhalte ja oft flexibel und man weiß im voraus nicht, welche Box welche Höhe annimmt. Dann verwendet man oft Faux Columns.
Sind deine Inhalte in diesen Bereichen von der Höhe her "kalkulierbar", dann kannst du auch bestimmte Höhen definieren.

Wer sagt, dass es ein HTML Layout ist?

Du hast in deinem ersten Beitrag von einem "Div-Layout" gesprochen und da reagiert "Efchen" stets recht empfindlich, weil er/sie das immer zu wörtlich nimmt und manchmal daran erinnert werden muss, dass sich Anfänger (aber auch Fortgeschrittene) der exakten Terminologie nicht unbedingt bewusst sind. :roll:

Nicht für jede Darstellung benötigt man einen Div, sonst kocht man eine sogenannte "Div-Suppe".
In deinem Beispiel könntest du auf #heading verzichten und diese Eigenschaften besser der Überschrift h1 zuweisen.
Auch #bar ist unnötig: Hier könntest du ebenso dem #main_text einen oberen roten Rahmen in entsprechender Stärke zuweisen.

Insgesamt also darauf achten, dass man so wenig wie möglich Elemente benötigt. Das macht sowohl HTML als auch CSS übersichtlicher und damit weniger fehleranfällig.

 

[cssneuling]

Nunja, das Layout basiert schließlich auf Div's, da hab ich mir bei der Namensgebung nichts weiter gedacht.
Mittlerweile hab ich etwas rumgebastelt und den gesamten oberen Teil in eine einzige Div gepackt. Absolute Größen eignen sich egtl auch ganz gut habe ich festgestellt, da werde ich wohl noch bisschen was daran ändern.

 

[Efchen]

weil er/sie das immer zu wörtlich nimmt und manchmal daran erinnert werden muss, dass sich Anfänger (aber auch Fortgeschrittene) der exakten Terminologie nicht unbedingt bewusst sind.

Dessen bin ich mir durchaus bewusst.
Aber wenn man jemandem nicht sagt, dass er was falsch macht, wie soll derjenige das dann wissen, bzw. wie soll er es lernen?
Gerade, was Trennung von Inhalt und Layout angeht, behindert sehr oft eine allzu schludrige Ausdrucksweise manchen Webmaster daran, die Einfachheit dieses Themas zu begreifen.
Wer von "div-Layout" spricht, wird beim Thema "Layout" immer irgendeine gedankliche Beziehung zu HTML aufbauen, umgekehrt passiert es dann, dass ein semantisch korrektes Tag durch ein falsches Tag ausgetauscht wird, weil das Aussehen des richtigen Tags nicht so gewünscht ist.
Wenn man das so wörtlich nimmt, wie ich das immer anmerke, dann merkt man erst, wie leicht die ganze Thematik eigentlich wirklich ist.

Nunja, das Layout basiert schließlich auf Div's, da hab ich mir bei der Namensgebung nichts weiter gedacht.

Ein Layout soll eben nicht auf divs basieren, sondern auf validem, semantisch einwandfreiem HTML. Und da spielt das div nur eine untergeordnete Rolle. Durch diese "Schludrigkeit" in der Ausdrucksweise wird aber derzeit nur erreicht, dass alle Welt ihre Tabellen durch divs ersetzen und das ist nicht der Grund, warum Tabellen verteufelt werden, bzw. das ist der selbe Unfug, nur mit einem anderen Tag.

Richtig ist, dass die allgemeinen Block-Elemente (divs) sehr hilfreich sind, wenn man Websites mit CSS-Layout gestaltet, aber auf ihnen sollte kein Layout basieren. Die Basis sollte immer semantisch einwandfreies HTML sein, denn das ist ja der ganze Sinn von HTML!

 

[neuroleptika]

Der #head kann durchaus eine Basis sein, z.B. so:

..
div#welcome{display: inline-block; background: orange; width: 30%; height: 100%;}

In diesem Fall haben #heading und #welcome 100% Höhe von #head und damit ebenfalls 100px.

Das Beispiel mit dem display:inline-block würde ich so nicht in der Praxis einsetzen.
Es sind einfach zu viele Browseranpassungen nötig:

  div#head {
 height: 100px;
 background: yellow;
}

div#heading {
float: left;
 background: yellow;
 width: 70%;
 height: 100%;
}

 span#welcome {
[COLOR="DarkRed"] display: -moz-inline-box; /*hack ff2*/[/COLOR]
 display: inline-block; /*kennt ff erst seit Vers.3*/
 background: orange;
 width: 30%;
 height: 100%;
}

/*hack ff2 */
[COLOR="DarkRed"] span#welcome_innen span {
 display: table; /*sonst kein Zeilenumbruch im ff2*/
}[/COLOR]

/*hack IE bis IE6*/
[COLOR="DarkRed"]* html span#welcome {
margin-right: -1em; /*Rundungsfehler/*[/COLOR]
}

/*hack IE7*/
[COLOR="DarkRed"]* +html span#welcome {
margin-right: -1em; /*Rundungsfehler? nicht getestet/*[/COLOR]
}

Vor allem mit Hacks für nicht-IE Browser sollte man vorsichtig sein.
Mit so etwas rumzuspielen kann aber nicht schaden. Für manche Layouts gibt es keine andere Lösung.
In diesem Fall ist faux-columns gut geeignet.