As you can see, I have a list of people on the left and a detail (contains both a person details and the chat history) window on the right. These two window scroll independently. When you click on a person’s name on the left, the person’s detail is shown on the right. Also, the area that contains both of these two areas maintain its height as you resize the window. On the right, the DETAIL and MESSAGE always stays on the top.
It took me some time to figure out how to do this. Here it is.
It uses the css rule shown above. The blue area is the container and it should takes up as much space as possible in the window. The orange area is a child of the blue area. For illustration purpose, I made it smaller than blue area, but since I didn’t set height on it, it will take up the height of the parent.
The area2 is the scrollable area. It contains children that will be larger than itself so it will show scroll bar. Please refer to the css rule on the picture.
