HTML 页面中的独立列滚动

Independent column scroll in HTML page

提问by Mika H.

I have two columns in my HTML page.

我的 HTML 页面中有两列。

<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.

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

回答by dezman

See this fiddle

看到这个小提琴

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

回答by odungern

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!

• 100% html 和 body size .... 没有滚动条
• 左右框的边距
• 仅在需要时单独滚动条（“自动”）
• 其他一些细节：试试吧！

Fiddle: 2 independently scrolling divs

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

回答by ryan

Yes. You will have to restrict their height. See this fiddlefor 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;
}

回答by PurkkaKoodari

Set a height for the columns, and set overflow: auto. You could also put all rules inside the same CSS selector. Like this:

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

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

回答by Blue_Fire

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

Please see this fiddle

请看这个小提琴

回答by Siva Charan

In simple, write your CSS this way

简单来说，用这种方式编写你的 CSS

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

Refer LIVE DEMO

参考现场演示