web-dev-qa-db-ja.com

100％高さの左サイドバーと動的な右コンテンツ-Bootstrap + Wordpress

私はBootstrapとWordpressを使用してWebサイトを作成しています。これは2列のレイアウトです-左サイドバー、右コンテンツです。右コンテンツは動的であり、無限スクロールによって拡大します。作成しようとしました左サイドバーの高さをいくつかの手法で100％にしましたが、効果がありませんでした。

サイドバーを適切なコンテンツdivのビューポート/高さのサイズに応じて下げ続けたいです。

私は裸のフィドルを作りました： http://jsfiddle.net/ydPMr/ しかし、私の開発ページで私が話していることをあなたが見た方がよいでしょう： 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>

サイドバーを高さいっぱいに伸ばす方法について誰かがアイデアを持っているなら、私はそれを感謝します。

ありがとう！

htmlcsswordpresstwitter-bootstrap
12
Joshua Walker

これは私にとってはうまくいきます。 フィドル

min-Heightを500pxに設定しました。最小限にしたくない場合は、削除してください。 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>
24
syed mohsin