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

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

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

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

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

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

Идеи?


html css overflow
person Jay Neely    schedule 27.04.2010    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

person prodigitalson    schedule 27.04.2010
comment
Спасибо, вы помогли установить связь, которая привела меня к решению JavaScript в рамках JS, который мы используем. - person Jay Neely; 28.04.2010

arrow_upward
2
arrow_downward

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

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 должны равняться значению высоты контейнера.

Если вы хотите получить все Дзен и перевернуть вертикальную композицию, вы можете сделать это, заменив 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 первого (больше для учета желоба между двумя элементами). Попробуйте, вам понравится.

person Ben Henick    schedule 27.04.2010