0

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).

Application

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

zessx
  • 68,042
  • 28
  • 135
  • 158
Phil
  • 1,897
  • 4
  • 25
  • 48
  • give the tablewrap and the tablewrapper height as a percentage of the total height. And at the same time, add a min-height property to them to make sure its height doesnt go below certain value. – Parthik Gosar Apr 08 '13 at 09:26
  • add min-height as per your height .tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto;min-height:240px;} http://jsfiddle.net/8pPPm/3/ – defau1t Apr 08 '13 at 09:29

3 Answers3

2

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;
  ...
}
Community
  • 1
  • 1
mb21
  • 34,845
  • 8
  • 116
  • 142
  • that's not going to work if the blue div has a dynamic height. Yes, I know that the example fiddle has a fixed 150px height but on the screenshot it seems to be different. – Salvatorelab Apr 08 '13 at 09:48
  • Thanks very much! Your solution has got us on the right track and we now have a resizing table in our application. Thanks! – Phil Apr 08 '13 at 09:55
  • Have a look at this code: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/ and remember that this solution will fail if you have dynamic divs. That is, divs that do not have a fixed height. – Salvatorelab Apr 08 '13 at 09:58
0

You can try this:

.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto; min-height:300px}

(Set the min-height as you want)

Nave Tseva
  • 868
  • 8
  • 24
  • 47
0

Well, it's time to say what you probably don't want to hear hehe: you can't do this with CSS.

You have to use javascript in order to find out two things:

  1. Viewport height
  2. Controls div height

Once you know those two heights, you can set your table height to:

finalHeight = viewport - (controls+header+footer)

If header and footer have also dynamic heights, use javascript to calculate them.

You will also need to recalculate this height on window resize. And of course your layout won't work if javascript is disabled.

Salvatorelab
  • 11,614
  • 6
  • 53
  • 80