Höhe von untereinander liegender DIVs in % und px

[HP-Bauer]

Hallo,

ich habe 3 DIVs untereinander stehen. Das oberste DIV hat eine Höhe von 60px. Das mittlere und untere DIV sollen die restliche Bildschirmhöhe im Verhältnis 70% zu 30% ausfüllen. Wie schaffe ich dies ohne das die Gesamthöhe 100% + 60px beträgt?

MfG
HP-Bauer

[Ulrich]

Hallo,

ich habe 3 DIVs untereinander stehen. Das oberste DIV hat eine Höhe von 60px. Das mittlere und untere DIV sollen die restliche Bildschirmhöhe im Verhältnis 70% zu 30% ausfüllen. Wie schaffe ich dies ohne das die Gesamthöhe 100% + 60px beträgt?

Das einfachste wäre es mMn, div 2 und 3 zusammen auf 100% zu bringen. Je nach dem wie genau die Rechnung 70%+30% - 60px denn sein muß.
Dem ersten Element im div 2 kann man dann mit margin-top 60px in die Spur helfen.
Das layer eins wäre abschließend absolut zu positionieren und mit z-index über den 60px Top Bereich von div 2 zu bringen, dann sollte es ungefähr so aussehen, wie Du es Dir vorstellst.
Ansonsten gäbe es die Möglichkeit das über JavaScript zu regeln, was ich aber vermeiden würde, da bei abgeschaltetem JavaScript nichts mehr dem nahekommen wird, was Du Dir vorstellst.

Last but not least: wieso ist es zwingend notwendig 60px für den header (das nehme ich an soll es werden) zu verwenden?
10%+65%+25% wäre doch vielleicht auch ein gangbarer Weg und sicherlich für mehr Anzeigegeräte/Bildschirmauflösungen optimal?

mfg
Ulrich

[Gunnar Bittersmann]

Hello out there!

Wie schaffe ich dies ohne das die Gesamthöhe 100% + 60px beträgt?

Ich würd sagen, mit dem gegenwärtig einzigen CSS-Box-Modell und ohne JavaScript gar nicht.

Es ist allerdings einfach, wenn die obere und mittlere Box zusammen 70% und die untere 30% Höhe haben.

See ya up the road,
Gunnar

[wahsaga]

hi,

Wie schaffe ich dies ohne das die Gesamthöhe 100% + 60px beträgt?

Ich würd sagen, mit dem gegenwärtig einzigen CSS-Box-Modell und ohne JavaScript gar nicht.

Na ja, mit durch absolute Positionierung implizit bestimmter Höhe könnte es schon gehen.

Aber da macht der gegenwärtig meinstverbreitete Browser nicht mit.

gruß,
wahsaga

[Gunnar Bittersmann]

Hello out there!

Na ja, mit durch absolute Positionierung implizit bestimmter Höhe könnte es schon gehen.

?? Wie du meinst. Äh, wie meinst du? (Mir ist wirklich nichts eingefallen.)

Aber da macht der gegenwärtig meinstverbreitete Browser nicht mit.

Mit dem sollte es im Quirks-Modus recht einfach sein – das IE-Box-Modell ist für diesen Zweck wohl besser geeignet. Und für andere vielleicht auch; gut dass es in CSS 3 auch standardisiert wird.

See ya up the road,
Gunnar

[wahsaga]

hi,

Na ja, mit durch absolute Positionierung implizit bestimmter Höhe könnte es schon gehen.

?? Wie du meinst. Äh, wie meinst du? (Mir ist wirklich nichts eingefallen.)

Der Fragesteller wollte folgendes:

Das oberste DIV hat eine Höhe von 60px. Das mittlere und untere DIV sollen die restliche Bildschirmhöhe im Verhältnis 70% zu 30% ausfüllen.

Oberstes Div 60px hoch, kein Problem.
Mitte und Unten könnte man zunächst in einen weiteren Container schachteln, der absolut mit top:60px; und bottom:0; positioniert wird - damit nimmt er schon mal den "Rest" der Höhe ein, die von Viewporthöhe minus 60px übrig bleibt.
Und darin könnte man dann Mitte und Unten im Verhältnis von 7:3 die Höhe teilen lassen ...

gruß,
wahsaga

[Gunnar Bittersmann]

Hello out there!

Mitte und Unten könnte man zunächst in einen weiteren Container schachteln,

Darauf bin ich auch noch gekommen ...

der absolut mit top:60px; und bottom:0; positioniert wird

... darauf nicht. top und bottom gleichzeitig – warum auch nicht?

damit nimmt er schon mal den "Rest" der Höhe ein, die von Viewporthöhe minus 60px übrig bleibt.

Funzt[tm], Funzkerl ;-)

See ya up the road,
Gunnar

[HP-Bauer]

Funzt[tm], Funzkerl ;-)

Funzt aber nur, wenn der obere DIV immer 60px hoch ist. Bei mir ist er aber mindestens 60px hoch, kann aber auch je nach Inhalt höher sein. Und nun? Werde es wohl doch alles mit %-Werten machen.

Trotzdem vielen Dank für alle Antworten.

MfG
HP-Bauer

[Manfred]

Ich habe ein ähnliches Problem.
Ich habe oben einen div, links einen und zwei unten die auch richtig dargestellt werden sowohl in Firefox als auch IE.

In der mitte soll ein div dargestellt werden der variabel breit und hoch ist. Habe ihn folgendermaßen formatiert:

.divcontent{
 position:absolute;
 top:92px;
 left:181px;
 bottom:92px;
 right:0px;
 z-index:918;
 overflow:auto;
}

Leider wird dieser aber nur im Firefox angezeigt. IE zeigt ihn mir erst an wenn ich width und height angebe (der wert auto hilft leider nicht).
Da width und height aber variabel sein sollen will ich da keine Angaben zu machen. Wenn ich je 100% width/height zu teile und dann über margin positioniere dann passt es zwar von der Position. Es kommen aber Scrollbalken und der Inhalt geht auch rechts und unten zu weit. Der mittlere Div enthält auch noch weitere Divs mit Positionierungen von Linien und Text.

Kann mir da jemand weiterhelfen? hab schon alles mögliche probiert in den letzten 6 Stunden probiert aber ich komm nicht weiter. Wäre nett wenn mir jemand eine Lösung hätte ohne JavaScript.

[at]

Hallo.

Kann mir da jemand weiterhelfen?

Wenn du gerade einmal das CSS für ein einziges Element veröffentlichst, ist das schwierig. Noch schwieriger ist es nur, mit absoluter Positionierung zu arbeiten. Verwende besser prinzipiell float und margin.
MfG, at