Независимая колонка прокрутки в HTML-странице

У меня есть два столбца на моей HTML-странице.

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

Каждый из них занимает половину страницы

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

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

Можно ли сделать так, чтобы они текла независимо? Я хочу, чтобы я мог прокручивать левый столбец, но остаюсь в верхней части правого столбца, вместо того, чтобы прокручивать оба столбца одновременно.

Ответ 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;
}

Ответ 2

Более ранние сообщения немного улучшились:

100% html и размер тела.... без полосы прокрутки
поля для левого и правого полей
индивидуальные полосы прокрутки только при необходимости ( "авто" )
некоторые другие детали: попробуйте!

Fiddle: 2 независимо прокрутки 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;
}

Ответ 3

Да. Вам придется ограничить их высоту. См. эту скрипту для рабочего примера.

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

Ответ 4

Задайте высоту для столбцов и установите overflow: auto. Вы также можете поместить все правила в один и тот же селектор CSS. Вот так:

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

Ответ 5

В простой форме напишите свой CSS таким образом

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

Обратитесь LIVE DEMO