Минимальная высота и прокрутка Div

Question

Я не уверен, возможно ли это, но я подумал, что спросить.

У меня есть макет div, который состоит из двух столбцов внутри контейнера div.Они выстроены с использованием встроенного блока и процентной ширины.

Базовая компоновка такая же, как и

<div id="containter" style="width:100%">

<div id="leftDiv" style="width:20%; height:100%; display:inline-block; overflow-y:scroll">
     List of Content
</div>

<div id="rightDiv" style="width:80%; height:100%; display:inline-block; min-height:500px; vertical-align:top">
     Some expanding information
</div>

</div>

Хорошо, поэтому эта базовая компоновка отлично работает.У меня проблема, как вы могли заметить, у меня переполнение в левой колонке и минимальная высота в правой колонке.Идея состоит в том, что в левом столбце будет отображаться список элементов, однако я не хочу, чтобы этот список растягивал высоту содержащего элемента div, я хочу, чтобы он вписывался в 100% содержащего элемента div и прокрутки.

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

В настоящее время я собираюсь написать исправление javascript, однако я хотел бы узнать, возможно ли это сделать в чистом CSS.Может быть, есть что-то новое в CSS3 / HTML5, которое поможет?

Спасибо за вашу помощь, ребята.

Answer 1

display:table; на самом деле не делает этого. Заданный вопрос требует прокрутки левого столбца, а не увеличения длины документа. См. эту скрипку для иллюстрации проблемы.

Единственный способ заставить overflow: scroll работать, как мне известно, это определить высоту; max-height:500px; работает примерно так , но вы не можете установить 100% без получения результатов мусора.

Похоже, что и макет, и прокрутка вашего js-решения являются необходимыми.