带引导程序的侧边栏

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>