サイドバー右にブートストラップ

Question

右サイドバーに問題があり、背景が正しく伸びていません。

コード：

.right-sidebar-menu{ 
    background-color: gray; 
    width: 300px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 9999; 
    bottom: 0; 
} 

jsfiddle

左側にテキストが右に長くそのサイドバーよりもあれば、私は背景がないので、スクロールやサイドバーは良いことではないだろう取得します延長する...

何か考えている理由はありますか？これを達成するための良いアイデアがある場合は、共有してください。 :-)

ありがとうございました。

Answer 1

グリッドシステムを使用して、右側のパネルを配置できます。例：

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
.right-sidebar-menu { 
 
    background-color: gray; 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-8 col-sm-8"> 
 
      <div class="main-box"> 
 
      <p class="text-justify"> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus diam sit amet posuere euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mauris ligula, convallis et iaculis non, auctor nec felis. 
 
       Vestibulum volutpat augue dignissim, consequat diam ac, consequat sapien. Nunc ultricies tellus justo, a imperdiet nisi posuere non. Suspendisse tincidunt egestas libero in aliquam. Sed varius consectetur ligula interdum feugiat. 
 
       </p> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4 col-sm-4"> 
 
     <nav> 
 
     <div class="right-sidebar-menu"> 
 
      <div class="sidebar-logo"><img src="" alt="awesome logo" /></div> 
 
      <div class="menu"> 
 
      <ul> 
 
       <li class="active"><a href="#">link 1</a></li> 
 
       <li><a href="#">Link 2</a></li> 
 
       <li><a href="#">Link 3</a></li> 
 
       <li><a href="#">Link 4</a></li> 
 
       <li><a href="#">Link 5</a></li> 
 
       <li><a href="#">Link 6</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </nav> 
 
    </div> 
 
    </div> 
 
</div>