不滚动的Bootstrap列

Question

我有一个用bootstrap制作的网页，比如我左边有4列，右边有6列。我需要左边的4不要滚动。我怎么做到这一点？

我知道我可以使用

class="affix"

在左栏中，但问题是当视口大小发生变化时，左列不再调整大小。

Answer 1

这是一个解决方案。您需要设置overflow: auto并在右列中定义嵌套div：

＆＃13;

＆＃13;

.cell {
  background: lightgreen;
  border: 1px solid teal;
  height: 100vh;
  overflow: auto;
}
.data_cont {
  height: 200vh;
  background: lightblue;
  margin: 0 -15px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-1 cell">
      left column
    </div>
    <div class="col-xs-6 cell">
      <div class="data_cont">data in the right column</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;