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

Question

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

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

В настоящее время максимальная высота не работает. 1-й div продолжает расти, даже с переполнением: auto; set и подталкивает второй div ниже его за пределы внешнего div. Как я могу сделать это так, чтобы, когда 1-й div становится слишком большим для внешнего div, чтобы содержать как его, так и фиксированный уровень 2-го div, первый 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 бывшего (больше для учета желоба между двумя элементами). Попробуй, тебе это понравится.