Два вертикальных элемента div, каждый с автоматической прокруткой с максимальной высотой

Я хотел бы достичь следующих требований. Скажем, у меня есть два контейнера (верхний и нижний) внутри основного контейнера:

1) Верхний и нижний контейнеры должны прокручиваться только тогда, когда содержимое переполняется в каждом контейнере.

2) Верхний контейнер должен иметь максимальную высоту, ограниченную 50% по мере роста содержимого.

3) Максимальная высота нижнего контейнера действительно зависит от высоты верхнего контейнера. Например, если верхний контейнер содержит 30 % высоты, нижний контейнер будет прокручиваться, когда его высота станет больше 70 %.

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

Есть ли способ добиться этого без использования flex-box, так как мне нужно поддерживать более старые версии IE.

Любая помощь приветствуется.

body,
html {
  height: 100%;
}

.container {
  height: 90%;
  width: 30%;
  display: table;
}

.top {
  padding: 24px;
  background: yellow;
  display: table-row;
}

.top div {
  overflow-y: auto;
  max-height: 50%;
}

.bottom {
  height: 100%;
  padding: 24px;
  background: tomato;
  display: table-row;
}

.bottom div {
  overflow-y: auto;
  height: 100%;
}
<div class="container">
  <div class="top">
    <div>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
    </div>
  </div>
  <div class="bottom">
    <div>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
    </div>
  </div>
</div>


html css autoscroll
person jj123456    schedule 20.03.2017    source источник
comment
вы устанавливаете максимальную высоту на 100 пикселей   -  person andrepaulo    schedule 21.03.2017
comment
@andrepaulo, я установил для максимальной высоты фиксированное число, чтобы добиться автоматической прокрутки для двух верхних и нижних контейнеров. Установка на 50% не сработала.   -  person jj123456    schedule 21.03.2017
comment
взгляните... jsfiddle.net/wq4p51ae/1 это то, что вам нужно?   -  person andrepaulo    schedule 21.03.2017
comment
@andrepaulo, спасибо за ответ. Не совсем, верхний контейнер должен иметь высоту от 0 до 50% в зависимости от того, сколько контента он содержит (динамический).   -  person jj123456    schedule 21.03.2017
comment
вы хотите сбалансировать размер верхнего и нижнего div ... не позволяя им превышать 50%?   -  person andrepaulo    schedule 21.03.2017
comment
@andrepaulo, я отредактировал вопрос. Посмотрите, станет ли это более ясным. Я хочу ограничить верхний div максимум 50%. Нижний div может иметь любую высоту.   -  person jj123456    schedule 21.03.2017
comment
см., если это то, что вы ищете... jsfiddle.net/wq4p51ae/2   -  person andrepaulo    schedule 21.03.2017
comment
@andrepaulo, нижний div теперь нельзя прокручивать..   -  person jj123456    schedule 21.03.2017
comment
Вы можете применить ту же концепцию .. Я сейчас не за столом .. но если вы не можете сделать, и вам никто не помогает .. Я попытаюсь помочь вам   -  person andrepaulo    schedule 21.03.2017
comment
@andrepaulo, я не могу применить максимальную высоту к нижнему div, и это зависит от высоты верхнего div, если вы имеете в виду эту концепцию. У меня нет помощников поблизости. Спасибо, что предложили свою помощь.   -  person jj123456    schedule 21.03.2017
comment
@ jf1034 jf1034 Хотел упомянуть, что это не имеет ничего общего с angular2   -  person David Lee    schedule 21.03.2017
comment
@DavidLee, спасибо, я не был уверен, потому что видел некоторые проблемы с прокруткой в ​​Angular2. Я удалил Angular 2 из вопроса.   -  person jj123456    schedule 21.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

Как насчет этого?

body,
html {
  height: 100%;
}

.container {
  height: 300px;
  width: 100%;
  display: table;
}

.top {
  padding: 24px;
  background: #000000;
  height: 300px;
  width:40%;
  float:left;
  overflow: auto;
  color:#ffffff;
}

.bottom {
  height: 300px;
  padding: 24px;
  background: #ff0000;
  color:#ffffff;
  display: table-row;
  width:40%;
  float:left;
}

li{list-style:none;}
<div class="container">
  <div class="top">
    <div>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
    </div>
  </div>
  <div class="bottom">
    <div>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
      <li>DYNAMIC CONTENT</li>
    </div>
  </div>
</div>

Я построил на скрипке @andrepaulo.

Ваше здоровье

person Syfer    schedule 21.03.2017
comment
Я вижу два контейнера по горизонтали, но не по вертикали в предоставленном вами фрагменте. - person jj123456; 21.03.2017