css - 全高 Bootstrap 列仅包含固定元素

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 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.