Dirk: Höhe von ineinandergeschalchtelten div

Beitrag lesen

SELF-Forum

Höhe von ineinandergeschalchtelten div

Dirk
– Informationen zu den Bewertungsregeln

Hallo,

ich habe ein Problem mit den Höhen von ineinander geschachtelten div.

Hier mal das HTML:

<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>

Und das css:

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, ebenso die divs inner_3 und inner_4.

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.

Kann man das lösen?

Danke für die Hilfe im Vorraus,
Dirk

Beitrag melden
–
Informationen zu den Bewertungsregeln