3

私はブートストラップの初心者です。管理パネルを設計してい ます。デモはこちらです。

サイドバーの高さを右側のコンテンツ div に等しく依存させたい。.ie (サイドバーの背景色は灰色になります)。

HTMLマークアップ：（ 私のhtml構造が適切かどうかも知りたい）

   <!-- Headder row -->
    <div class="row">
       <div class="navbar"> .....  </div>
    </div>

 <!-- Content row -->
    <div class="row">
        <!-- SIDEBAR Open -->
        <div id="sidebar-left" class="col-2 col-lg-2">
            ....
       </div>
   <!-- right content box -->
     <div id="content-right" class="col-lg-10 container" >
      ......
    </div
   </div>


<!-- Footer row -->
    <div class="row">
      ......   
    </div>

期待される出力: ここに画像の説明を入力

4

5 に答える 5

1

これを試して

http://jsfiddle.net/BM65D/

body{
    margin:0;
    padding:0;
}
.header{
    background-color:#00A2E8;
    height:50px;
    position:fixed;
    top:0;
    width:100%;
}
.footer{
    background-color:gray;
    height:50px;
    position:fixed;
    bottom:0;
    width:100%;
}
.left{
    height:400px;
    background-color:#C3C3C3;
    width:200px;
    position:fixed;
    top:50px;  
}
.right{
    left:200px;
    width:100%;
    position:absolute;
}
于 2013-08-06T10:42:45.953 に答える
0

以下に示すように、正しいコンテナーの高さを取得して、左側のナビゲーション バーに割り当ててみてください。

$(document).ready(function(){
    var s = $(".container").outerHeight(true); 
  s+= "px";
  //alert("height" + s);
  $("#sidebar-left").css("height", s);
  $("#sidebar-left").css("background-color", "grey");


});
于 2013-08-06T10:43:50.920 に答える
0

.containerのコンテンツ領域全体をワープしてみてください。流体レイアウトの下の古いドキュメントでこれを見ました

于 2013-09-12T14:59:41.480 に答える