I have a webpage that has a Map (google), Chart, and Grid. They share the screen via Splitters and TabStrips. I am having an impossible time making them expand to 100% of height/width of the space that they have available to their <divs>
I have created a stripped down JsFiddle that shows the problem: http://jsfiddle.net/drysg/Rh7cL/
Full Browser version: http://jsfiddle.net/drysg/Rh7cL/embedded/result/
I have tried all sorts of CSS tricks (display layout, block, using height: 100%, width: 100%, explicit setting of all width/height in the hierarchy. But nothing is working. I simplified the CSS to illustrate.
I am looking for a pure CSS solution that:
1. Expands Grid, Chart, and Map to fill the screen at outset
2. Browser Resize will dynamically resize the Grid, Map, and Chart
(they will shrink to available space like any good WPF or Silverlight app!
3. If needed, I would tolerate a JQuery approach that responded to window resize events.
If you look closely you will see there are actually 4 issues:
1. The map height is not 100% of the needed space
2. The TabStrip that holds the Chart & Grid is not filling 100% of the height
2. There is a scrollbar on the TabStrip that holds the Chart
and Grid (I want that removed since they should be filling the space)
3. What I do want is the scrollbar of the Grid to be working (and that way I won't have a scrollbar on the TabStrip)
The layout hierarchy is as follows:
I. Top Window
1. Title DIV
i. Table DIV