Inhalt über Browserfensterhöhe hinaus auf die gleiche Höhe bringen

  • Hallo,


    ich habe nun schon zahlreiche Versuche hinter mir, aber irgendwie will mein Vorhaben nicht klappen.


    Ich habe links eine Sidebar und rechts den Contentbereich mit einer Variablen Höhe. Ich möchte die Navigationsleiste immer genau so lang haben, wie der Contentbereich aktuell ist.


    Ich habe dies bereits mit jQuery(..).height() und min-height:100% probiert, allerdings kriege ich die Sidebar dann immer nur so hoch, wie die Ansicht im aktuellen Browserfenster reicht. Ist der Contentbereich länger, sodass man scrollen muss, endet die Navigationsleiste direkt an der Stelle, was standardmäßig im Sichtbereich war.


    Weiß jemand von euch wie ich das auf eine Höhe bringe?

  • Edit: Achso es gibt keine andere Lösung außer den Hintergrund über ein Backgroundimage zu simulieren? Dann hätte ich aber noch das Problem, dass die Inhalte nachdem die Navigation zuende ist wieder direkt unter ihr angezeigt werden und nicht mehr im gleichen Abstand nebeneinander, wie es passiert solang die Navigation lang genug ist.


    Die Seite hatte ich schon offen - es geht aber leider trotzdem nicht :/



  • Schau dir mal flexbox an: http://css-tricks.com/using-flexbox/


    Das wird halt vom IE mal wieder erst ab Version 10 supported, ansonsten ist es schon recht gut abgedeckt.
    Wenn das keine Option ist wirst du tricksen müssen.


    Auf welches Element hast du denn jQuery.height() verwendet? Auf den Content-Bereich sollte das eigentlich schon passen.

    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

    Einmal editiert, zuletzt von SinnlosS ()

  • Edit:


    Hab den Fehler gefunden. Scheinbar interpretiert der Browser height:100% immer als Höhe der Browseransicht und nicht Höhe des Inahlts. Da ich dies auf html, body und wrapper angewandt hatte, funktionierte scheinbar die jquery Methode nicht. Hab es nun darüber gelöst, aber irgendwie schade, dass man es aktuell nur halbwegs vernünftig via JS lösen kann. Auch in anderen Templates sah ich immer, dass man hier die Größe via JS setzt.


    Schau dir mal flexbox an: http://css-tricks.com/using-flexbox/


    Das wird halt vom IE mal wieder erst ab Version 10 supported, ansonsten ist es schon recht gut abgedeckt.
    Wenn das keine Option ist wirst du tricksen müssen.


    Auf welches Element hast du denn jQuery.height() verwendet? Auf den Content-Bereich sollte das eigentlich schon passen.



    Sowohl auf content als auch wrapper aber beides klappte leider nicht.





    Im Firebug > Layout hat #content eine Höhe von 1638 px (sodass es ja eigentlich gehen sollte - wird auch im eingebauten Debugalert angezeigt) - der wrapper aber komischerweise, obwohl content darin liegt immer nur die Höhe das aktuellen Sichtfelds.

  • Ich habe gerade selber mal getestet, das hier funktioniert prima:


    Code
    1. $(function(){
    2. nav_left_height();
    3. $("#content").resize(nav_left_height());
    4. });
    5. function nav_left_height() {
    6. $("#nav-left").height($("#content").height());
    7. }


    Edit: Ich würde dir aber zu Flexbox raten und den JQuery-Code nur als Browser-Weiche für IE <10 verwenden.

    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook