nicht angemeldet
Höhe von ineinandergeschalchtelten div
Gunnar BittersmannHallo,
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
-
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-
Hier mal das HTML:
[code lang=html]<body>
<html>The body is the world ;)
Gnarf, ja, da hast Du wohl recht :-)
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.
Aber wird nicht durch top und bottom die Höhe des Wrappers wieder vom Inhalt unabhängig und von der Ausdehnung des Parent Elements, also im (berichtigten) Fall von body abhängig?
.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.
Naja, es hat die Auswirkung das es genauso hoch ist wie das Parent Element, als das wrapper div. Und dadurch läuft es dann ja aus dem wrapper div raus.
Grüße,
Dirk
-
-
@@Dirk:
nuqneH
Hier mal das HTML:
<body>
<html>Dass das kein HTML ist, hat Beat ja schon gesagt.
<div class="wrapper">
Bei der Berichtigung deines Codes kannst du gleich diesen völlig überflüssigen Container entsorgen. Du hast bereits zwei.
<div class="inner_1">
<div class="inner_2">
<div class="inner_3">Du willst nicht klassifizieren, sondern identifizieren. Also @id, nicht @class. (Und im CSS natürlich die Selektoren ändern.)
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)