如何在网页中创建两个独立的列?

Sai*_*idi 3 html css

我希望在网页中有两列,每一列都有自己的滚动条,而不是两个都使用的滚动条.例如,我正在考虑的是新的twitter ui ..如果列表长度超过高度,则一列显示带有滚动条的列表,而另一列用自己的滚动条显示详细信息.

我只是迷失了哪种方式继续下去,我是否需要使用框架来实现这一目标.是否可以抑制全局滚动条,每列使用自己的滚动条和css?

Dan*_*Dan 9

HTML:

<html>
  <body>
    <div class='right'>
      <!-- data -->
    </div>
    <div class='left'>
      <!-- data -->
    </div>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

CSS:

body{
  overflow:hidden; /* This will remove the default scroll, not really needed, safer nonetheless */
}
.right, .left{
  overflow:auto; /* This will add a scroll when required */
  width:50%;
  float:left;
  height: 100%
}
Run Code Online (Sandbox Code Playgroud)