12

Bootstrap と Wordpress を使用して Web サイトを作成しています。左サイドバー、右コンテンツの 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>

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

ありがとう！

4

1 に答える 1

24

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

に設定しmin-Heightました500px。最小値が必要ない場合は、削除してください。heightのコンテンツに従って機能しますcontent div。このフィドルのように

  <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>
于 2012-12-17T07:48:32.007 に答える