Question

Is there is simple (enough) way to achieve the layout I want using CSS?

       jQuery dialog:

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

The layout is a jQuery dialog with two areas stacked vertically: comment list and new comment input. The dialog is resizable and when its height grows or shrinks, I want the comment list’s height to change accordingly. New comment input area height stays fixed.

Basically, I want the comment list to be the height of the dialog minus the height of input area.

The proposed layout is (although you may change it):

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

So can I achieve this with CSS so it would work in IE8+ and other browsers? Or as I’m already using jQuery UI, then perhaps there is an elegenat JS solution?

Answer 1

You could try this:
jsFiddle sample

It works in chrome & IE9 (don’t have IE8 right now).
It uses anchoring by setting top, left, right and bottom for absolute positioned objects. You do need to alter the jquery UI style to include position fixed, otherswise the absolute positioning inside the dialog is screwed 🙂

Comment if u need more help, hope I brought you another idea of solving this issue.