div in div

Elgar

Enthusiast
Thread Starter
Mitglied seit
30.11.2006
Beiträge
1.073
Hiho,

ich habe auch gerade mal eine html und css Frage.

Folgendes html Beispiel:

Code:
<body>
    <html>
        <div class="wrapper">
            <div class="inner_1">
                blub 1
            </div>
            <div class="inner_2">
                
                <div class="inner_3">
                    blub 2
                </div>

                <div class="inner_4">
                    <div class="inner_5">
                    </div>
                </div>
                
            </div>
        </div>
    </html>
</body>

Dazu das css

Code:
div {
    position: absolute;
}

.wrapper {
    border: 1px solid black;
    top:20px;
    bottom:20px;
    height: auto;
    left:20px;
    right: 20px;
    width: auto;
}

.inner_1 {
    border: 1px solid blue;
    top 0px;
    width: auto;
    position: relative;
    margin:5px;
}

.inner_2 {
    position: relative;
    border: 1px solid red;
    width: auto;
    height: 100%;
    margin: 5px;
}

.inner_3 {
    position: relative;
    width: auto;
    height: 20px;
    border: 1px solid yellow;
    margin: 5px;
}

.inner_4 {
    width: 200px;
    overflow-y: scroll;
    height: 200px;
    border: 1px solid magenta;
    margin: 5px;
}

.inner_5 {
    width: 100px;
    height: 1000px;
    border: 1px solid green;
}

Die divs inner_1 und inner_2 sollen untereinander stehen.

Die Höhe von inner_1 wird durch den Inhalt bestimmt, kann also variieren.

Die Höhe von inner_3 ist fix, ebenso von inner_5


Zur eigentlichen Frage:

Wie schaffe ich es, das das div inner_2 das wrapper div in der (restlichen) Höhe komplett ausfüllt? Wenn ich die Höhe auf 100% setzte, läuft es aus dem Wrapper raus, bei kleineren Prozentwerten (z.B. 80%) ist der Abstand zwischen den unteren Rändern von inner2 und Wrapper nicht konstant.

Das div inner_4 soll zudem auch noch in der Höhe maximal sein, also den restlichen Platz in inner_2 ausfüllen.

Zur Veranschaulichung gibts das ganze auch Online bei jsfiddler.net

Danke für Hilfe im Voraus.
 
Hardwareluxx setzt keine externen Werbe- und Tracking-Cookies ein. Auf unserer Webseite finden Sie nur noch Cookies nach berechtigtem Interesse (Art. 6 Abs. 1 Satz 1 lit. f DSGVO) oder eigene funktionelle Cookies. Durch die Nutzung unserer Webseite erklären Sie sich damit einverstanden, dass wir diese Cookies setzen. Mehr Informationen und Möglichkeiten zur Einstellung unserer Cookies finden Sie in unserer Datenschutzerklärung.


Zurück
Oben Unten refresh