Вертикально гибкий блок в диалоговом окне jQuery с изменяемыми размерами и CSS

Question

Есть ли простой (достаточный) способ добиться макета, который я хочу, используя CSS?

       jQuery dialog:

== Heading ==================
|                           |
|        Comment list       |    <-- Flexible height
|                           |
-----------------------------
|     New comment input     |    <-- Fixed height
|================ [close] ==|

Макет представляет собой диалоговое окно jQuery с двумя вертикально расположенными областями: списком комментариев и вводом нового комментария.Размер диалогового окна можно изменять, и когда его высота увеличивается или уменьшается, я хочу, чтобы высота списка комментариев изменялась соответствующим образом.Высота области ввода нового комментария остается фиксированной.

По сути, я хочу, чтобы список комментариев был высотой диалога минус высота области ввода.

Предлагаемый макетесть (хотя вы можете изменить его):

<div id="dialog">
    <div id="commentsList">
    </div>
    <div id="newComment">
    </div>
</div>

Так можно ли добиться этого с помощью CSS, чтобы он работал в IE8 + и других браузерах?Или, поскольку я уже использую пользовательский интерфейс jQuery, возможно, существует решение elegenat JS?

Answer 1

Вы можете попробовать это: jsFiddle sample

Это работает в Chrome и IE9 (сейчас IE8 нет).Он использует привязку, устанавливая top, left, right и bottom для объектов с абсолютным позиционированием.Вам нужно изменить стиль пользовательского интерфейса jquery, чтобы включить фиксированную позицию, в противном случае абсолютное позиционирование внутри диалогового окна закручено: -)

Прокомментируйте, если вам нужна дополнительная помощь, надеюсь, я принес вам другую идею для решения этой проблемы.

Answer 2

Я не знаю о диалоге jQuery и о том, какие эффекты он будет иметь, но:

Если вы делали это с прямой разметкой, убедитесь, что #dialog и #commentList не имеют объявленных высот в CSS. Затем просто присвойте #newComment определенную высоту (например, 45 пикселей). В обычном HTML-потоке два других div (#dialog и #commentList) будут расти по мере необходимости. То есть по умолчанию их высота установлена ​​на «авто».

Если диалог jQuery переопределяет это значение по умолчанию (вы можете определить это с помощью Firebug или аналогичного инструмента разработчика, который показывает вычисляемый стиль), вам может потребоваться повторно объявить 'height: auto;' на этих селекторах.