jquery - 如何在 Bootstrap 列中禁用垂直滚动

Question

我有两个 Bootstrap 列“左”和“右”；我想用屏幕修复左列并禁用滚动。但我想在右栏中启用滚动，这样会有更多内容。基本上我想显示帖子，这样帖子标题将显示在左栏中，帖子内容将显示在右栏中 完全像 this .注意:我使用了 overflow-y: hidden; 但它没有用。这就是我想要实现的目标:https://blog.squarespace.com/blog/introducing-promotional-pop-ups

这是我的左列代码:

<div id="main" class="col-md-6 left-half ">
  <h2 style="diplay:inline-block">Intrigue</h2> 
  <input id="morearticlesbtn" class="button" type="button" onclick="openNav()" value="More Articles "> 
  <div class="row">
  <div class="post-meta col-md-6">
      <p>July 18, 2017</p>
      <p>By: James Crock</p>
      <a href="#"> Transport</a> 
  </div>
      <div class="col-md-6">
          <div class="line"></div>
      </div>
  </div>


  <div class="title-div">
  <h1 class="title">Squarespace Sponsors 2017 D&AD New Blood Awards</h1>
  </div>

  <div class="row">
      <div class="col-md-9" >
          <div class="line bottom-line"></div>
      </div>
  <div class="col-md-3 bottom-line-text">
  <h4>Next</h4>
  </div>

    </div>
    </div>

这是CSS代码:

.left-half{
    height: 100%;
    overflow-y:hidden;
    position: fixed;
    bottom: 0;
    height: 100vh;

}
.left-half h2{
    display: inline-block;         
}

Answer 1

只需将 position:fixed 和 height:100% 添加到您的左列并将数据添加到您的右列

https://codepen.io/anon/pen/JJgjqX