Bootstrap 可滚动列，高度为 100%

Question

overflow-y: scroll我有 2 列使用 bootstrap，我试图在隐藏滚动条时拥有正确的列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和#rightdiv 的父容器设置高度。

您必须指定height: 100%父容器，即.container-fluid和.row。但是，我.parent向.row容器添加了额外的类，因为添加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>