全高自举col只包含一个固定元素

Question

我正在通过bootstrap制作左侧，并在设置内部元素固定位置时出现此问题。

这是我的HTML

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3 left"> 
      <left-side></left-side> 
     </div> 
     <div class="col-md-6 center"></div> 
     <div class="col-md-3 right"> 
      <right-side></right-side> 
     </div> 
    </div> 
</div> 

问题是在COL-MD-3级左右，莱夫特赛德指令有固定的位置，因此左类只具有高度1px的。所以col-md-6类隐藏了我的leftSide指令 现在我想让左边的高度适合leftSide指令的高度。不关心右侧。 我尝试了左：后，但它没有奏效。 谢谢。 这是什么样子

Answer 1

您可以使用height: 100vh;和overflow: scroll;申请的高度是这样的：

.container-fluid{ 
 
    background: #ccc; 
 
    min-height: 100vh; 
 
} 
 
.left left-side{ 
 
    width: 25%; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    z-index:1; 
 
    overflow: scroll; 
 
    height: 100vh; 
 
    background: #fff; 
 
} 
 
ul{ 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
ul li{ 
 
    padding: 10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-3 col-md-3 left"> 
 
      <left-side> 
 
       <ul> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       <li>Menu</li> 
 
       </ul> 
 
      </left-side> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-6 col-md-6 center"> 
 
      <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
      </p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-3 col-md-3 right"> 
 
      <right-side></right-side> 
 
     </div> 
 
    </div> 
 
</div>

这里我用引导3.3.7（您可以更改任何其他版本），也可以检查此Fiddle.