[CSS] div Höhe wird ignoriert

  • Hallo,


    möchte die Seite so ausfüllen, dass das Menü 10% der Seitenhöhe ausfüllt, der Inhalt 60% und der Footer 30%.
    Damit wären dann 100% ausgefüllt, allerdings werden die Prozentangaben der einzelnen Elemente gekonnt ignoriert.
    Erst wenn ich fixe Angaben in Pixeln angebe, wird die Höhe angepasst.
    Ich habe bereits versucht, dem Wrapper, der alle Elemente umschließt, eine 100%ige Höhe zu verpassen, was aber nicht funktioniert hat.


    Das Ganze wundert mich sowieso, weil es bisher immer funktioniert hat.


    Hat jemand eine Idee, woran es liegt?


    Danke im Voraus.



  • Prozentuale Angaben gelten relativ zum Eltern-Element. Das heißt #page-main-menue hat 10% der höhe des Elements, in dem es sich befindet.


    Du könntest Viewport-Units vh nutzen, die werden aber nicht in allen Browsern unterstützt.
    Vielleicht Machts das Flexbox Model auch mehr Sinn für dich.


    Aber um das genau zu wissen müsste man wissen wie dein Layout aussieht, denn ich glaube das du nicht wirklich willst dass das Menü eine Höhe von 10% hat. Das würde nämlich bedeuten dass das Menü, je nach Auflösung des Besuchers, verschieden groß ist und damit unter Umständen hässliche Nebeneffekte mit sich bringt. In der Regel gibt man Menüs (Sowohl NavBar als auch SideBar) eine Feste Größe in Pixeln, und platziert dann den Content fluid darunter/daneben.

    The fact is, I am right. And if you think I'm wrong, you are wrong.

  • Ja, das stimmt.
    Mein Vorhaben ist halt, dass das Menü oben ist, der Kontent direkt nahtlos dadrunter und anschließend das Menü.
    Alles drei soll dann die Seite komplett ausfüllen.
    Ich könnte zwar mit absoluter Positionierung arbeiten, aber das ist leider zu fehleranfällig, da z.B. dann Texte über die Elemente hinüber ragen, wenn zuviel davon vorhanden ist.