Height of grid

[queensgambit9]

I would like to set height of grid depending on available screen size, currently I do it through:

height: window.innerHeight,

1. Would it be possible to auto adjust height when window is moved between screens with different resolutions?
2. When a state is saved, grid height seems absolute...when state is then loaded in different resolution it does fit in page as intented...can this also be dynamic?

[paramvir]

Please keep the grid div element direct descendant of body element and assign height: '100%' option.

[queensgambit9]

Can't get it to work correctly. For each grid I set:

Code: [Select]

height: '100%'
but regarding the div structure, I am not sure where to set height: '100%'...

Code: [Select]

<div id="tabs">
  <ul>
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
  </ul>

  <div id="content1" style="margin: auto;">
    <div id="grid1"></div>
  </div>
  <div id="content2" style="margin: auto;">
    <div id="grid2"></div>
  </div>

</div>

[paramvir]

In this case, first you have to take care of tabs since grid is a child of tabs and grid height when mentioned in % is dependent upon height of parent.

html changes:

Code: [Select]

<div id="tabs" style="height:100%;">
  <ul>
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
  </ul>

  <div id="content1" style="margin: auto;">
    <div id="grid1"></div>
  </div>
  <div id="content2" style="margin: auto;">
    <div id="grid2"></div>
  </div>

</div>

css changes:

Code: [Select]

html,body {
    height:100%;
    margin:0;   
}
*{
  box-sizing:border-box;
}

Expand tab panel to the available height based on the tabs' parent height.

Code: [Select]

$("#tabs").tabs({
  heightStyle: "fill",
...


Code: [Select]

$(window).on('resize', function(){
  $("#tabs").tabs('refresh')
})

https://jsfiddle.net/syz921mb/

[queensgambit9]

Thanks.