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