Independent column scroll in HTML page

I have two columns in my HTML page.

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

Each of them occupies half of the page

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

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

Is it possible to make it so that they flow independently? I mean, I want to be able to scroll down the left column, but remain at the top of the right column, instead of having to scroll down both columns at the same time.

---

看到这个小提琴

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

---

The earlier postings improved a little:

100% html and body size .... without scroll bar

margins for the left and right boxes

individual scrollbars only when needed ("auto")

some other details: Try it!

Fiddle: 2 independently scrolling divs

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

---

Yes. You will have to restrict their height. See this fiddle for a working example.

#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/83844.html

上一篇: 除非用户向上滚动，否则请将溢出div滚动到底部

下一篇: HTML页面中的独立列滚动