Использование CSS max-height на внешнем div для принудительной прокрутки на внутреннем div

Question

У меня есть внешний div с переменной высотой (и max-height), который устанавливается с помощью определенного количества пикселей в JavaScript и содержит два div внутри.

1. 1-й div предназначен для хранения переменного количества контента, например, список ссылок. Высота не установлена.
2. 2-й div предназначен для хранения фиксированного количества контента и имеет определенный набор высоты.

Сейчас максимальная высота не работает. 1-й div продолжает расти даже при переполнении: auto; установить, и толкает 2-й div ниже этого за пределами внешнего div. Как я могу сделать так, чтобы когда 1-й div становился слишком большим, чтобы внешний div содержал его и 2-й блок фиксированной высоты, 1-й div начал прокручиваться?

Пример страницы: http://thevastdesign.com/scrollTest.html

Спасибо за любую помощь. Я был бы признателен за решение CSS больше всего, даже если оно требует некоторых хаков. Он должен работать только в Firefox 3+, IE8 и IE7.

Идеи

Answer 1

Вы не можете сделать это без JS. Ваша максимальная высота на внешнем элементе div не будет контролировать высоту одного из ваших внутренних элементов div, чтобы вызвать его прокрутку. Этот внутренний div всегда будет установленной вами высотой (пиксели, авто и т. Д.). Вы можете либо сделать всю внешнюю прокрутку div, если необходимо, используя overflow: auto, либо установить максимальную высоту для первого внутреннего div и установить переполнение.

Answer 2

Учитывая ваши настройки, я бы сделал следующее (имена классов подразумеваются вашим вопросом, а не взяты из связанного источника):

div.outer {
  position: relative;
  max-height: $length(y);
  overflow: hidden;
}

div.innerFixed {
  position: absolute;
  bottom: 0;
  height: $length(y);
  overflow: hidden;        /* just in case, to keep things from
                              blowing out into all manner of crazy */
}

div.innerFlex {
  max-height: $length(y);
  overflow: auto;

}

Эти правила не относятся к свойствам поля, которые будут влиять на применяемые вами значения высоты. Объединенные значения высоты (с включенными значениями блоков) .innerFixed и .innerFlex должны равняться значению высоты контейнера.

Если вы хотите получить все Zen и перевернуть вертикальную композицию, вы сделаете это, поменяв bottom на top на .innerFixed и присвоив margin-top или padding-top .innerFlex.

Что-то еще, что я заметил, это то, что у вас есть

div.outer { float: left; }

... Но с учетом того, что вам нужно от этого элемента (и для установки правильного приоритета содержимого), я бы вместо этого предложил, чтобы вы сначала поместили большой столбец в исходном порядке и применили

div.mainContent {
  float: right;
  width: $length(x);
}

div.outer { /* i.e., the column that started the discussion */
  margin-right: length(x);
}

с пониманием того, что margin-right последнего несколько больше, чем width первого (больше, чтобы учесть водосток между двумя элементами). Попробуйте, вам понравится.