Divs in Container-Div untereinander anordnen

[hejira]

Hallo zusammen,

ich möchte gerne in einem äußeren Container-Div drei untergeordnete Divs vertikal anordnen. Das obere und untere Div sollen jeweils eine feste Höhe besitzen, das mittlere soll die restliche Höhe ausfüllen. Hier ein Beispiel:

<div style="position: absolute; top: 100px; left: 100px; height: 400px; width: 400px; border: dashed 1px black;">
        <div style="height: 50px;background-color: red;"></div>
        <div style="height: 100%;background-color: green;"></div>
        <div style="height: 50px;background-color: blue;"></div>
    </div>

Im Beispiel ist das Container-Div quadratisch und besitzt eine Kantenlänge von 400px. Die drei inneren Divs besitzen die höhen 50px (rot), 100% (grün) und 50px (blau).

Was ich jetzt eigentlich erwartet häte ist, dass das mittlere Div eine offsetHeight von 300px besitzt. Leider bewirkt die Angabe von height = 100%, dass das mittlere Div mit einer offsetHeight von 400px gerendert wird.

Ich habe "100%" bisher immer als "maximal auffüllen" verstanden und nicht als "100% der Größe des Container-Elements". Kann mir jemand sagen, ob ich hier falsch liege und falls ja, wie ich erreichen kann, dass das mittlere Div exakt die verbleibende Höhe ausfüllt, dabei aber nicht das untere Div über den Rand des Container-Divs hinausschiebt?

Im Quirks-Mode zeigt der IE übrigens das gewünschte Verhalten, was aber keine Option für mich ist. Deshalb wäre ich für jeden Hinweis sehr dankbar.

Viele Grüße
hejira

 

[dkdenz]

Irgendwie verstehe ich das Anliegen nicht.
Wenn Du eine fixe Höhe von 400px angibst, was wäre denn verkehrt daran, dem mittleren div eine fixe Höhe von 300px zu geben, wenn das obere und das untere div eine Höhe von 50px haben?

 

[anna55]

Laut W3C beziehen sich Höhenangaben, die in Prozent angegeben werden, auf die Höhe des umschließenden Blocks, also auf die des Elternelements, was in Deinem Fall ja 400px hoch ist.

Wie Du's machen kannst, hast Du schon gesagt bekommen.

 

[hejira]

Hallo dkdenz,

ich habe das Problem mit diesem Beispiel vereinfacht dargestellt. Im konkreten Fall weiß ich die Höhe des Container-Divs nicht im Voraus, deshalb kann ich auch nicht einfach die Differenz bilden, um so das mittlere Div zu dimensionieren.

Falls es dir hilft, kannst du auch das folgende, leicht modifizierte Container-Div hernehmen, um mein Problem nachzuvollziehen:

<div style="position: absolute; top: 100px; left: 100px; height: 50%; width: 400px; border: dashed 1px black;">
        <div style="height: 50px;background-color: red;"></div>
        <div style="height: 100%;background-color: green;"></div>
        <div style="height: 50px;background-color: blue;"></div>
    </div>

Hier ist die Höhe des Container-Divs mit 50% definiert, weshalb man die Höhe des mittleren Divs nicht mehr ohne Weiteres berechnen kann. Auch hier wächst der Inhalt über die Grenzen des Containers hinaus.

Damit das Beispiel funktioniert benötigst du zusätzlich die CSS-Angabe "html, body { height: 100%; }"

 

[dkdenz]

Naja, das funktioniert erstmal mit herkömmlichen Mitteln nicht, das ja nicht bekannt ist, was 2x50px von 100x sind.
In dem Fall ist das Mischen von Pixel- und Prozentwerten sehr waghalsig.
Das wäre wahrscheinlich erst mit position:absolute-Werten lösbar...

 

[hejira]

Okay, trotzdem Danke für die rasche Hilfe. Die Frage beschäftigt mich schon eine Zeit lang und jetzt habe ich wenigstens eine konkrete Antwort darauf.