如何在响应式引导程序中创建具有单独滚动条的两列？答案

【问题标题】：How to create Two Columns with Separate Scrollbars in Responsive Bootstrap?如何在响应式引导程序中创建具有单独滚动条的两列？
【发布时间】：2013-12-06 17:42:15
【问题描述】：

如何通过单击按钮在 Bootstrap 中获得 2 个带有滚动条的列？以下是详细信息：

我的页面有一个 row-fluid div，其中包含 main-column div，其中包含 main-content 和 extra-content。我有一个用于将额外内容传输到另一个名为右列的 div 的按钮。（该按钮也使右栏变大。）这一切都很好。

点击前：

主栏
主要内容部
Ex t r a Content Div

点击后，额外内容进入右栏：

主栏 |右栏
主要内容 |额外内容

我现在希望右列和主列在单击后各有自己的滚动条，这样人们就可以分别滚动每一侧。但是，当我尝试添加代码来执行此操作时，右列最终位于主列下方。然后我尝试了其他代码，但它什么也没做。我该如何正确地做到这一点？我的代码如下。

HTML：

<html>
<body>
<div class="container-fluid">

<div class = "row-fluid" id="parent-column">
  <div class = "span8" id="main-column">
     <div id="main-content">
       <p>Lorem ipsum...</p>
     </div>

     <div id="extra-content">
        <span class="btn" id="two-column-button">Two-Column</span>
     </div>

   </div>

  <div class = "span1" id="right-column">
  </div>
</div>

</div>
</body>
</html>

第二次尝试的 CSS：（什么也没做）。

#right-column{
  overflow: auto;
  width: 50%;
  float: right;
  height: 100%
}

#main-column{
  overflow: auto;
  width:45%;
  float:left;
  height: 100%
}

#parent-column{
  overflow:hidden;
}

【问题讨论】：

标签： jquery css twitter-bootstrap responsive-design sass

【解决方案1】：

这是一个（愚蠢的）错误：

 height: 100%

一旦我用设定的高度替换它，滚动就起作用了。

【讨论】：