Here I want 100% height in my bottom section and I don't want exceed what I fixed 400px height in “.main” class

Question

I am getting problem with 100% height in my design bottom section. Here I want 100% height in my bottom section and I don't want exceed what I fixed 400px height in “.main” class. and i dont want move height of top section.i want only bottom section 100% all the time.

Can you check here : http://jsfiddle.net/jZTr2/2/

I dont want to move top blue highlighted section. And I want 100% height bottom chat section.

Answer 1

I hope it will work. http://jsfiddle.net/jZTr2/10/

Answer 2

Here you go: http://jsfiddle.net/jZTr2/12/

The secret is display:table and display:table-row . Note that you may need to customize the width a bit for your implementation.