css - 靴筒全高仅包含一个固定元素

我正在通过引导程序制作左侧，并且在设置内部元素固定位置时遇到此问题。

这是我的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左类中，leftSide指令具有固定位置，因此左类仅具有1px的高度。所以col-md-6类隐藏了我的leftSide指令
现在，我想让左类的高度适合leftSide指令的高度。不在乎右边。
我尝试过left：after，但是没有用。
谢谢。
这就是它的样子

最佳答案

您可以使用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>

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