全高度bootstrap 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左侧类中，leftSide指令有固定位置，因此左侧类只有高度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>

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