全高引导 col 仅包含一个固定元素

Question

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

这是我的 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 left 类中，leftSide 指令有固定位置，所以 left 类的高度只有 1px。所以 col-md-6 类隐藏了我的 leftSide 指令 现在我希望左类高度适合 leftSide 指令高度。不要在意右边。 我试过 left:after 但没有用。 谢谢。 就是这个样子

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.