Question

I’ve gone through dozens of examples in Stack Overflow but I just can’t quite seem to get this right and it’s starting to make me wish I’d chosen a different career!

I need a fixed height and fixed width table with three rows.

Row 1 will be variable height and should grow and shrink according to the content, with no vertical scroll bar.

Row 3 should be fixed height at the bottom of the table.

Row 2 should take up all the remaining space but should contain a vertical scroll bar if the content is too big.

Basically, this is to display an email message to the user. Row 1 will contain all the headers and any optional headers, attachments, etc. (which is why it needs to be variable height).

Row 2 is the body of the message, with a scroll bar.

Row 3 is for action buttons, Delete, Forward, etc.

The whole thing needs to be fixed height and width because I need to embed it in to a JQuery dialog DIV.

In my question title I’ve put table in quotes because I’m happy to have a CSS-only solution, provided it works as described. The key goal for me is that we achieve the functionality above in a cross-browser approach.

Hope you can help!

Answer 1

First, here’s a demo: little link.

What I did was to not include the text directly in the middle cell, but give it position: relative;, then create a div inside it with the following:

position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: auto;

Which, as you can see in the demo above, does the job.

Hope that helps!