Задать максимальную высоту для отображения содержания жидкости ширины

Question

У меня есть следующая http://jsfiddle.net/4G33W/1/

Это жидкость, как она есть, и работает отлично, но когда другие элементы будут добавлены в список в #commentWrapper, он ломает макет как он толкает все «вниз».

Чтобы проверить копию еще <li>test</li> элементов, и вы увидите, что я имею в виду. Я хочу, чтобы окно ввода оставалось внизу (как и atm), и когда список становится достаточно длинным и достигает его, список должен перейти в режим переполнения x: авто. Я не могу использовать фиксированную высоту, так как она нарушит «текучесть» всего предмета, или, по крайней мере, мои попытки, похоже, не сработали.

Какое-нибудь решение css/html здесь? Должен ли я обратиться к javascript для решения? Я также использую jquery, на всякий случай, если в javascript есть ответ.

Answer 1

Это может быть сделано с чистым css в этом случае. Применяя эти правила к #commentWrapper элемент будет делать трюк:

#commentWrapper { 
    width: 17%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    box-sizing: border-box; 
    padding-bottom: 20px; 
    overflow-y: auto; 
} 

Работа jsfiddle здесь: http://jsfiddle.net/4G33W/2/

Answer 2

@Bogdan решение работает, потому что "высота: 100%;" работает, когда «позиция: абсолютная»; устанавливается. Остерегайтесь макета, который вам нужно собрать, и браузеры, которые вам нужны для поддержки.

И посмотрите на can i use на box-sizing поддержка.