帶引導程序的側邊欄

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>