html - Bootstrap 可滚动列，高度为 100%

Question

我有 2 列使用 bootstrap，我试图让正确的列有 overflow-y: scroll 同时在 html, body 上隐藏滚动条

问题是，滚动条出现了，但它被禁用且不可滚动。

这是我的HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-8 text-center" id="left">
    <p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4" id="right">
        <p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p>
        </div>
    </div>
</div>

CSS

body, html {
  margin: 0;
  overflow: hidden;
  height:100%;
}
#left {
    background-color: #FC6E51;
}

#right {
    background-color: #4FC1E9;
}

#left, #right{
  text-align: center;
  height:100%;
  overflow-y: scroll; 
}

我做错了什么？

JSFiddle https://jsfiddle.net/ensc5uy1/9/

编辑 @Chris 和@Ben 提供的内容在 JSFiddle 中有效，但是当我在我的应用程序中应用它时它不起作用。我用我的整个 CSS 创建了一个新的 JSFiddle，它可以在那里工作，但不能在我的应用程序中工作。我不知道发生了什么

https://jsfiddle.net/5td0acad/

Answer 1

问题是您没有为 #left 和 #right div 的父容器设置高度。

您必须为父容器指定 height: 100%，即 .container-fluid 和 .row。但是，我向 .row 容器添加了额外的类 .parent，因为将 height: 100% 添加到 .row 类可能会影响应用程序布局的其余部分。您可以为您的应用程序选择一个更适合的名称。

您还必须设置 overflow: auto，以便滚动条仅在溢出时显示。

您可以在下面看到它的运行情况:

body, html {
  margin: 0;
  height:100%;
}
body{
  overflow: hidden;
}
#left {
    background-color: #FC6E51;
}

.container-fluid, .parent{
  height: 100%;
}

#right {
    background-color: #4FC1E9;
}

#left, #right{
  position: relative;
  float: left;
  text-align: center;
  height:100%;
  overflow-y: auto; 
}

<div class="container-fluid">
  <div class="row parent">
    <div class="col-xs-12 col-sm-12 col-md-8 text-center" id="left">
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents END</p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4" id="right">
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents END</p>
    </div>
  </div>
</div>