Jquery 如何在响应引导中创建具有单独滚动条的两列？_Jquery_Css_Twitter Bootstrap_Responsive Design_Sass

Jquery 如何在响应引导中创建具有单独滚动条的两列？

jquery css twitter-bootstrap responsive-design sass

Jquery 如何在响应引导中创建具有单独滚动条的两列？,jquery,css,twitter-bootstrap,responsive-design,sass,Jquery,Css,Twitter Bootstrap,Responsive Design,Sass,如何在启动时单击一个按钮就可以得到两列滚动条？详情如下: 我的页面有一个row fluid div，其中有一个主列div，其中包含主要内容和额外内容。我有一个按钮，用于将额外的内容传输到另一个名为right column的div。（按钮也使右栏变大。）这一切都很好单击之前：主栏 M a i n内容分区 E x t r a内容部单击后，额外内容将转到右栏：主栏|右栏主要内容|额外内容我现在希望右栏和主栏在点击后都有自己的滚动条，这样人们可以分别滚动每一面。然而，当我尝试添加代码来实现这

如何在启动时单击一个按钮就可以得到两列滚动条？详情如下:

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

单击之前：

主栏
M a i n内容分区
E x t r a内容部

单击后，额外内容将转到右栏：

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

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

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>

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

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

#parent-column{
  overflow:hidden;
}

 height: 100%