javascript - Div to fill remaing vertical space

Question

I have a complex HTML application, so unfortunately cannot really provide a code sample. We are trying to get the div (highlighted in red) to fill the remaining vertical space (see image).

The application consists of a header (in black), a sidebar on the left which can be dismissed or resized (note: the horizontal components resize correctly). To the right of the sidebar is another div (mainDiv). mainDiv contains a div at the top for the controls, and a div underneath it for the table of data (highlighted in red).

This table can potentially contain lots of data, so it needs its own scrollbar if the data doesn't fit on the screen.

We just want the table to fill all of the available horizontal and vertical space. We just can't seem to make it work.

We have created a jsfiddle example to demonstrate our layout as best we can. This can be seen here. We just want this div (in jsfiddle the div is called "tablewrap") to take up all of the remaining space.

Code (from jsfiddle) is as follows:

html

<div class="header">Header</div>
<div class="sidebar">This is the sidebar</div>
<div class="tablewrapper">
    <div class="tableheader-controls-etc"></div>
    <div class="tablewrap">table</div>
 </div> 

css

.header { height: 50px; background:black; color:white; }
.sidebar { height:100%; position:fixed; width 200px; background:gray; color:white; }
.tablewrapper{ float:right; width:75%; border:1px solid; margin-top:30px; margin-right:30px;}
.tableheader-controls-etc { height:150px; background:blue; color:white; }
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto;}

If anyone can provide a solution that would be great. We would prefer CSS but can cope with Javascript.

Thanks, Phil

Answer 1

The trick is to set position: absolute, then adjust the top, bottom, left and right properties as needed. See fiddle and explanation.

.tablewrap {
  position: absolute;
  top: 240px;
  bottom: 0;
  left: 150px;
  right: 40px;
  height: auto;
  width: auto;
  ...
}