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

Question

недавно я задал этот вопрос: переполнение (прокрутка) - 100% высота контейнера о том, как добиться вертикальной прокрутки div с переменной высотой.

очень полезный пользователь предоставил решение, использующее абсолютное позиционирование и высоту: 100%, здесь: http://jsfiddle.net/TUwej/2/. В этой скрипке вы можете увидеть основное желаемое поведение - элемент прокрутки заполнит высоту основного контейнера. как определяется содержимым элемента #main.

Я немного изменил это и использовал top: 0 bottom: 0 вместо height: 100%, чтобы разместить элемент над областью прокрутки. модифицированную версию можно увидеть здесь: http://jsfiddle.net/N6muv/3/ (я понимаю, что есть небольшая дополнительная разметка и определения классов, которые пусты, и соседний комбинатор одноуровневых элементов, который кажется избыточным - это остатки фактической структуры)

все в порядке, за исключением того, что мне пришлось предоставить фиксированную верхнюю координату для прокрутки div (обратите внимание на объявление top: 120px для селектора '.sidebar-list'). Мне бы хотелось, чтобы это было относительно элемента «.sidebar-options» над ним, чтобы вышеупомянутый контейнер опций мог иметь любое количество опций, и прокручиваемый div будет располагаться соответствующим образом. используя фиксированные координаты, если какие-либо параметры добавляются или удаляются, либо происходит наложение, либо возникает ненужное пространство - я бы хотел этого избежать. точное число отображаемых опций зависит от вида.

Я думал обернуть прокручиваемый div в относительно позиционированном контейнере, но при этом возник конфликт с параметром bottom: 0 больше не указывает на высоту основного контейнера .wrapper (что он и должен делать). аналогично, при использовании height: 100% будет использоваться вычисленная высота контейнера «.wrapper», поэтому прокручиваемый div будет выходить за границы «.wrapper».

есть ли способ сохранить функциональность, показанную во втором скрипте, но с верхней частью прокручиваемого div относительно нижней части опций div (который будет иметь переменную высоту)?

Заранее спасибо за любые предложения.

РЕДАКТИРОВАТЬ: S.O. Я спросил, хочу ли я получить награду, поэтому я сделал это (в первый раз) - надеюсь, 100 баллов не считается слишком низким. все еще ищем решение без сценариев, чисто CSS, которое не включает фиксированные координаты или размеры для оси Y (ширина и левое назначение в порядке). ТНХ

Answer 1

UPDATE:

Импорт JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Новая демоверсия: http://jsfiddle.net/Mutant_Tractor/N6muv/28/

Добавьте этот симпатичный маленький скрипт JQuery на свою страницу:

var contentColHeight = $('.content').height();
var optionColHeight = $('.sidebar-options').height();
var newHeight = contentColHeight - optionColHeight;
$('.sidebar-list').height(newHeight);

---

OLD

Как это соответствует вашим потребностям? http://jsfiddle.net/Mutant_Tractor/N6muv/4/

Я изменил position:absolute; на position:relative и добавил статический height:190px, а также добавил background:pink; (так что bg всегда выглядит правильно)

Вы можете попробовать добавить и удалить параметры из списка выше, чтобы продемонстрировать это.

Полный код:

.sidebar-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background : pink;
}

Answer 2

Вам нужно определить высоту списка боковой панели, потому что вы должны установить этот контент для прокрутки, и должны быть определены минимальная или максимальная высота.И вы можете установить .sidebar-list{position: relative;} См. Fiddle

Редактировать Ваш .sidebar-content также должен быть относительно позиционирован См. Fiddle независимо от содержания вашего "options".

Answer 3

Я считаю, что вы должны удалить абсолютное позиционирование на внутренних элементах и ​​попробовать переполнение: auto.