100% Höhe linke Seitenleiste mit dynamischen rechten Inhalt - Bootstrap + Wordpress

Question

Ich mache eine Website mit Bootstrap und Wordpress. Es ist ein 2-Spalten-Layout - linke Seitenleiste, rechts Inhalt. Der richtige Inhalt ist dynamisch und wird durch unendliches Scrollen erweitert. Ich habe versucht, die linke Seitenleiste durch verschiedene Techniken auf 100% Höhe zu bringen, aber ohne Erfolg.

Ich möchte die Sidebar entsprechend der Größe des Ansichtsfensters/Höhe des rechten Inhalts div weiter unten.

Ich habe eine nackte Geige gemacht: aber es wäre besser, wenn Sie sehen würden, worüber ich auf meiner Entwickler-Seite gesprochen habe: http://joshuawalker.koding.com.

Hier ist die grundlegende Struktur meiner Seite:

<div class="navbar navbar-inverse navbar-static-top"> 
<div class="navbar-inner"></div> 
</div> 
<div class="wire-unit hero-fix"> 
</div> 
<div class="sidebar hidden-phone"></div> 
<div class="content"></div> 

Wenn jemand irgendwelche Ideen, hat, wie die Sidebar zu machen volle Höhe zu strecken, würde ich es zu schätzen wissen.

Danke!

Answer 1

Das funktioniert gut für mich. Fiddle

stelle ich die min-Height-500px. Wenn Sie kein Minimum wünschen, entfernen Sie es. Es funktioniert nach der height Ihres Inhalts in der content div. Gefallen Sie diese Fiddle

<div class="wrapper"> 
    <div class="sidebar hidden-phone"> 
    </div> 
    <div class="content"> 


    </div> 
</div> 

und Stil

<style type="text/css" > 
    .wrapper 
    { 
     min-height:100%; 
     width:100%; 
     position:relative; 
     background-color:Black; 
     display:inline-block; 
    } 
    .sidebar 
    { 
     width:20%; 
     top:0px; 
     left:0px; 
     bottom:0px; 
     position:absolute; 
     background-color:Aqua; 
    } 
    .content 
    { 
     min-height:500px; 
     width:80%; 
     position:relative; 
     background-color:Gray; 
     float:right; 
    } 
</style>