HTML页面中的独立列滚动

我的HTML页面中有两列。

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

它们中的每一个占据页面的一半

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

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

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

---

看到这个小提琴

#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;
}

---

之前的帖子有所改善：

100％html和body size ....没有滚动条

左边和右边框的边距

个别滚动条仅在需要时（“自动”）

一些其他细节：试试吧！

小提琴：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;
}

---

是。 你将不得不限制他们的身高。 看到这个小提琴的一个工作示例。

#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;
}

链接地址: http://www.djcxy.com/p/83843.html

上一篇: Independent column scroll in HTML page

下一篇: CSS to display a popup at 20px from top on a scrollable page