html - HTML页面中的独立列滚动

Question

我的 HTML 页面中有两列。

<div id="content">
  <div id="left"></div>
  <div id="right"></div>
</div>

他们每个人都占据页面的一半

#left {
    float: left;
    width: 50%;
}

#right {
    float: left;
    width: 50%;
}

是否有可能使它们独立流动？我的意思是，我希望能够向下滚动左列，但保持在右列的顶部，而不必同时向下滚动两列。

Answer 1

看到这个小提琴

#content, html, body {
    height: 98%;
}
#left {
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: scroll;
}
#right {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: scroll;
}

Answer 2

较早的帖子有所改进：

• 100% html 和正文大小....没有滚动条
• 左右框的边距
• 仅在需要时使用单个滚动条（“自动”）
• 其他一些细节：试试吧！

小提琴：2个独立滚动的div

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}
#content {
  height: 100%;
}
#left {
  float: left;
  width: 30%;
  background: red;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.5em;
}
#right {
  float: left;
  width: 70%;
  background: blue;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.5em;
}

Answer 3

body {
  margin: 0;
}

#left {
  position: fixed;
  background-color: green;
  width: 50%;
  height: 100%;
  overflow: auto;
}

#right {
  position: fixed;
  background-color: red;
  width: 50%;
  height: 100%;
  right: 0;
  overflow: auto;
}

请看这个小提琴

Answer 4

设置列的高度，然后设置overflow: auto. 您还可以将所有规则放在同一个 CSS 选择器中。像这样：

#left, #right {
    float: left;
    width: 50%;
    height: 200px; /* Set your height here */
    overflow: auto;
}

Answer 5

是的。你将不得不限制他们的高度。 请参阅此小提琴以获取工作示例。

#content {
    height: 10em;
}
#left {
    float: left;
    width: 50%;
    background-color:#F0F;
    max-height:100%;
    overflow: scroll;
}

#right {
    float: left;
    width: 50%;
    background-color:#FF0;
    max-height:100%;
    overflow: scroll;
}

Answer 6

简单来说，这样写你的 CSS

#content div{
    height: 300px;
    width:200px;
    float: left;
    border:1px solid blue;
    overflow-y: auto;
}

参考现场演示