100％の高さのサイドバーとダイナミックな権利内容 - Bootstrap + Wordpress

Question

私はBootstrapとWordpressを使ってウェブサイトを作っています。これは2列のレイアウトです - 左側のサイドバー、右側のコンテンツ。適切なコンテンツは動的であり、無限のスクロールによって拡張されます。私はいくつかのテクニックを使って左側のサイドバーを100％の高さにしようとしましたが、役に立たなかった。

右側のコンテンツdivのビューポート/高さのサイズに応じてサイドバーを下げ続けたいと思います。

私は裸のフィドルを作った：http://jsfiddle.net/ydPMr/3しかし私の開発ページで話していたものを見た方が良いでしょう。http://joshuawalker.koding.comここで

は私のページの基本構造である：

<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> 

誰もが完全な高さを伸ばすためにサイドバーを作成する方法上の任意のアイデアを持っている場合、私はそれをお願い申し上げます。

ありがとうございます！

Answer 1

これは問題なく機能しています。 Fiddle

私は500pxにmin-Heightを設定します。最小限にしたくない場合は削除してください。 content divのコンテンツのheightに従って動作します。このFiddle

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


    </div> 
</div> 

とスタイル

<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>