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

<div id="wrapper">
            <div id="nav-left">
                nav left
            </div>
            <div id="nav-top">
                top nav
            </div>
            <div id="content" class="clearfix">
                <h1>hallo</h1>
                <h1>hallo</h1>

            </div>
            <div style="clear: both;"></div>
        </div>

@media only screen and (min-width: 980px)
{
    /* Style adjustments for viewports that meet the condition */
    #nav-left
    {
        width:223px;
        float:left;
        min-height:100%;
        /* IE 6 Fix */
        height:auto !important;
        height:100%;


    }


    #nav-top
    {
        min-width:100%;
        /* IE 6 Fix */
        width:auto !important;
        width:100%;
        height:45px;
    }


    #content
    {
        min-width:100%;
        /* IE 6 Fix */
        width:auto !important;
        width:100%;
    }
}
.clearfix:after
{
    clear: both;
}

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.

Zitat von SinnlosS

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.

$(document).ready(function()
{
    function auto_height()
    {
        alert($('#content').height());
        $('#nav-left').height($('#content').height());
        $('#content').resize(function()
        {
            auto_height();
        });
    }
    auto_height();
});

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.