Inneres Div wird bei äusern Div mit erweitert

Computer: Software & Programmierung HTML & CSS
#1

Guten Morgen,

ich hab ne kleine frage da ich etwas nicht verstehe.

bei meiner Seite http://tagesmutter-kronberg.de hab ich folgendes „Problem“.
Mein Div „Sidebar“ und „Main“ liegen in einen Div „main_back“, dass ich für den hintergrund brauche.
Jetzte zum „Problem“ wenn ich dem Div „main_back“ via height ne feste größe geben z.B. 1000px dann wird das div Sidebar nach unten mit erweitert. Im prinziep find ich das sau gut, weil das is genau das was ich haben will im endeffekt.
Wenn ich jetzt aber für „main_back“ height:100% eingebe, damit ich ne dynamische größe habe wird die sidebar nich mit erweitert.
Kann mir jemand erklären wieso das so ist?
Ansonsten hat jemand ne Idee wie ich es mache, dass die Sidebar sich mit erweitert?

Quelltext Beispiel:

LINKS
TEXT

CSS

#main_back{height:1000px; width:1000px; float:left}
#sidebar{height:100%; width:200px; float:left}
#main{height:100%; width:800px; float:left}

mit freundlichen Grüßen
Robin

#2

Quelltext Beispiel:

LINKS
TEXT

CSS

#main_back{height:1000px; width:1000px; float:left}
#sidebar{height:100%; width:200px; float:left}
#main{height:100%; width:800px; float:left}

Öhm kann ich das jetzt nachvollziehen , nein

LINKS
TEXT

funktioniert doch (jednfalls im firefox 4.0) . es liegt also an deinem css und nicht an dem beispiel .

#3

Moin!

Wenn ich jetzt aber für „main_back“ height:100% eingebe, damit
ich ne dynamische größe habe wird die sidebar nich mit
erweitert.
Kann mir jemand erklären wieso das so ist?

Weil - ohne jetzt nachzusehen - Du vermutlich von falschen 100% ausgehst, die 100% hier nicht das sind, was Du - fälschlicherweise - erwartest.

Eine Höhe von 100% bedeutet NICHT „so hoch wie der Viewport“, sondern „so hoch wie das Elternelement“.

Um ein Element so hoch wie den Viewport zu machen, müssen zuerst body und html auf height:100% gebracht werden, dann alle Kindelemente bis hin zu dem, wo Du es brauchst.

Liebe Grüße,
-Efchen

P.S.: Bitte nicht Layout mit divs machen oder div als Wunderwaffe ansehen! Bitte die Semantik nicht vergessen! Ein div, das den Namen „header“ bekommt, ist noch lange keine Überschrift. Möglicherweise weißt Du es besser, aber im Moment sieht es so aus, als würdest Du vom richtigen Pfad abkommen (HTML = Semantik).

#4

Eine Höhe von 100% bedeutet NICHT „so hoch wie der Viewport“,
sondern „so hoch wie das Elternelement“.

Eine seite auf 100% (browser)viewport in Y richtung skallieren ist ein gugloch , wobei auch hier der User meist ein minimum (browser)viewport in y richtung braucht.
Ich kenn kaum eine sinnvolle Anwendung eines 100% Y (browser)viewport.

#5

Hallo,

das es so funktioniert weiß ich ja is mir bekannt.
Was mich nur verwundert ist die reaktion der sidebar, wenn ich das div main_back auf 1000px setze.
Dann wird nämlich das div sidebar mit erweitert.
Da versteh ich halt nicht wieso das es überhaupt passiert bzw. nicht wieso es nicht mit erweitert wird, wenn ich die höhe des main_back auf 100% setze.

Grüße
Robin

#6

Wenn ich es so machen würde wie du sagst, sprich alles auf 100%, wird er mir ja die komplette Seite aufreisen.

Abgesehen davon heißt 100% nicht auch, dass das ElternDIV nicht so groß „gezogen“ wird bis das Kind element genau reinpasst? Oder irre ich mich da?

Mein Problem ist halt nur das ich nicht verstehe, wieso mir die sidebar komplett erweitert wird, wenn ich im main_back ne feste größe eingebe.

Zum P.S. wie meinst du das? Einem Div ist es doch egal was ich mit ihm mache oder seh ich das falsch? Das mein Head Div die ID header stimmt zwar, aber das hab ich einfach für das css.

#7

Tach,

ich hab nochmal auf die Seite geschaut.

Jetzte zum „Problem“ wenn ich dem Div „main_back“ via height
ne feste größe geben z.B. 1000px dann wird das div Sidebar
nach unten mit erweitert.

Ja klar, Du hast es so angegeben!
#Sidebar ist height:100%
Natürlich erweitert sich das Element dann, denn eine relative Höhe orientiert sich an der Höhe des Elternelements!

Im prinziep find ich das sau gut,
weil das is genau das was ich haben will im endeffekt.

Na, dann ist doch gut :smile:

Wenn ich jetzt aber für „main_back“ height:100% eingebe, damit
ich ne dynamische größe habe wird die sidebar nich mit
erweitert.

Natürlich nicht. Denn #main_back wird damit dann nur so groß, wie #wrapper. Der ist auch 100% hoch, aber body und html nicht. Damit ist #wrapper genau so hoch, wie sein Inhalt.

Kann mir jemand erklären wieso das so ist?

Hab ich ja schon gemacht.

Ansonsten hat jemand ne Idee wie ich es mache, dass die
Sidebar sich mit erweitert?

So, wie Du es versucht hast.

Vermutlich hilft Dir auch „Faux Columns“ weiter.

Grüße,
-Efchen

#8

Tach!

Ich hab unter Deinem OP nochmal nachgesehen unde ne Antwort gepostet.

Wenn ich es so machen würde wie du sagst, sprich alles auf
100%, wird er mir ja die komplette Seite aufreisen.

Naja, das ist ja auch nicht das, was Du willst. Du hast dann ein #main_back, das 100% des Viewports hoch ist, hast aber darüber und darunter noch Elemente, die auch Platz einnehmen. Dann ist 100% für #main_back natürlich zu groß.

Abgesehen davon heißt 100% nicht auch, dass das ElternDIV
nicht so groß „gezogen“ wird bis das Kind element genau
reinpasst? Oder irre ich mich da?

Da irrst Du Dich.

Mein Problem ist halt nur das ich nicht verstehe, wieso mir
die sidebar komplett erweitert wird, wenn ich im main_back ne
feste größe eingebe.

Weil Du angegeben hast, dass #sidebar 100% hoch sein soll, also genausso hoch wie #main_back. Und wenn Du dann #main_back auf 1000px Höhe stellst, wird #Sidebar auch 1000px Höhe, oder genauso mit 793px Höhe oder mit 251px.

Zum P.S. wie meinst du das? Einem Div ist es doch egal was ich
mit ihm mache oder seh ich das falsch? Das mein Head Div die
ID header stimmt zwar, aber das hab ich einfach für das css.

Ich meinte damit, dass Du auf dem Weg bist, div-Suppe zu kochen, Dein Layout mit divs zu machen, anstatt Deinen Inhalt semantisch sinnvoll mit HTML auszuzeichnen. Du hast da ein leeres div (#header), was semantisch gesehen völlig überflüssig ist.
Dann hast Du den Fehler gemacht, dass Du die Grafik als Hintergrundgrafik eingebaut hast, obwohl sie doch Content enthält, also als eingebaut werden muss. Sonst geht doch für alle nicht-visuellen Clients die Überschrift „Tagesmutter Kronberg“ völlig verloren (die aber auch nur dann eine Überschrift ist, wenn Du sie mit ausgezeichnet hast).
Dein Code macht den Eindruck, dass Du den eigentlichen Sinn von HTML noch nicht verstanden hast (womit Du leider in guter Gesellschaft bist).

Liebe Grüße,
-Efchen