Bootstrap只滚动一个div并将其他内容保留在顶部

Question

有点像facebook.我有4列,我希望滚动只适用于其中一列内容.

我已经读过arround,我应该将body上的身高设置为100%,然后在我要滚动的div上修复高度.还没有成功.

<div class="col-lg-12"> 
   <div class="col-lg-2"></div> 
   <div class="col-lg-6"></div> <!-- div that I want scroll -->
   <div class="col-lg-1"></div>
   <div class="col-lg-3"></div>
</div>

Answer 1

要将div与页面一起滚动,请在用户滚动时使用

.col-lg-6 {
  position:fixed;
}

要使该列中的内容可滚动,请使用

.col-lg-6 {
  height: 200px; // Set this height to the appropriate size
  overflow-y: scroll; // Only add scroll to vertical column
}

如果这不能解决您的问题,请更新您的问题并澄清.:)

"我已经阅读了周围的内容,我应该将身体高度设置为100%,然后在我想要滚动的div上修复高度" - 你没有必要有100%的身高才能让它正常工作.但是,如果您希望内容可滚动,则应在列上具有静态高度.如果您只想在页面上修改列,如我的两个建议中的第一个所述,则不需要指定高度.这就是为什么它只写在第二个解决方案中.

Answer 2

您不应该重写Bootstrap类明确,而是在您的div和样式中添加一个类:

<div class="col-lg-12"> 
   <div class="col-lg-2"></div> 
   <div class="col-lg-6 h-scroll"></div>
   <div class="col-lg-1"></div>
   <div class="col-lg-3"></div>
</div>

然后你的CSS看起来像:

.h-scroll {
    height: 90vh; /* %-height of the viewport */
    position: fixed;
    overflow-y: scroll;
}

如果你想模仿Facebook的,它是更好地使用视台(vh,vw而不是硬设定像素高度,你可以检查兼容性这里.