Question

我有两个bootstrap列＆＃34; left＆＃34;和＆＃34;对＆＃34 ;;我想用屏幕修复左栏并禁用滚动。但我想在右栏中启用滚动，这将有更多的内容。基本上我想显示帖子，以便帖子标题显示在左栏中，帖子内容显示在右栏中与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

只需将positon:fixed和height:100%添加到左侧列并将数据添加到右侧列

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

Answer 2

您只需应用一些CSS即可实现此目的：

两列都应具有完整视口的高度 - ＆gt;身高：100vh;
可滚动列也应设置overflow-y以进行滚动。

以下是一个示例：https://jsfiddle.net/kLu69r7t/

.fixed-col {
  height: 100vh;
}

.scrollable-col {
  height: 100vh;
  overflow-y: scroll;
}

当然，您需要为列提供相应的类。

Answer 3

只需修复左栏。您不需要使用overflow-y，当您需要在元素中滚动时使用它。

＆＃13;

.fixed {position: fixed !important; top: 0px; left: 0px; bottom: 0px; background: red;}
.scrollable {background: yellow;}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-3 fixed">
		Fixed
	</div>
	<div class="col-xs-9 pull-right scrollable">
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	</div>

＆＃13;

如何在bootstrap列中禁用垂直滚动

3 个答案: