Beat: Höhe von ineinandergeschalchtelten div

Beitrag lesen

Hier mal das HTML:

<body>

<html>

The body is the world ;)

<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:  
>   
> [code lang=css]div {  
>     position: absolute;  
> }  
>   
> .wrapper {  
>     border: 1px solid black;  
>     top:20px;  
>     bottom:20px;  
>     height: auto;  
  
Das heisst, die Höhe des Wrappers definiert sich nach der Höhe des Inhalts.  
  

>     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%;  
  
Hat in dem Fall keine Wirkung, da das Parent Element eine height von auto hat.  
  

>     margin: 5px;  
> }  
  

> Die divs inner\_1 und inner\_2 sollen untereinander stehen,  
  
Das tun sie. unabhängig davon, was du pit position:relative anrichtest  
  

> 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.  
  
Wenn du auf ein Element height:xxx% anwenden willst, so müssen die Höhenwerte aller Parentelemente (inklusive html und body) definiert sein.  
  

> Kann man das lösen?  
  
Mit einem Gemisch aus % und px nur sehr schlecht.  
man kann allerdings mit negativen margins arbeiten.  
  
mfg Beat

-- 

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische