Need help with height 100% layout
- by serg
I am trying to build the following layout (file browser type of thing, left block would contain a list of files, right panel would contain selected file content):
<------------- MENU ------------------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
<--- LEFT ----><------- RIGHT --------->
The page itself shouldn't have any scrollbars.
Menu has 100% width and fixed height
Left block has fixed width and 100% height. If content is taller - scroll bar appears inside the left block only.
Right block contains <pre> element and takes the remaining width and 100% height. If content is wider or taller - scrollbar appears inside the right block only.
This is what I have so far: http://jsbin.com/uqegi4/3/edit
The problem is fixed menu height messes up 100% height calculation and all scrollbars inside left and right blocks appear at wrong time.
I don't care about cross browser compatibility, only Chrome matters.
Thanks.