title: Slidedowned element height
body: <p>I have a grid, i have absolute positioned boxes in it. The boxes have a head part and a page part which is hidden... when i click on a button, all boxes will be hidden and the selected one becomes 100% wide and its hidden page slides down to be shown.
  My problem is that the part of my website which is under the grid (my footer) is hidden by the slided down pages because the grid's height does not push down the downer parts of the website...
  I can not give fix height for the grid because different contents will be variable... I do notr understand why my relative positioned grid's height is not calculated by the system...</p>
  
  <p>HTML structure :</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="header"&gt;
          &lt;button class="showclick"&gt;Show&lt;/button&gt;
          &lt;button class="hideclick"&gt;Hide&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="grid"&gt;
          &lt;div class="box"&gt;
              &lt;div class="box-head"&gt;&lt;/div&gt;
              &lt;div class="page"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;This is my footer which should be under the slide-downed (shown) page&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I guess the problem is with my CSS. But as the system is complex, i am not sure that i can change the positioning and overflows in it... </p>
  
  <pre><code>body {position:relative;display:block;max-width:800px;min-height:101vh; margin:0 auto;overflow-x:hidden}
  .content {position:relative;display:block;width:100%;padding:5%;background:blue}
  
  .header {position:relative;display:block;width:100%;background:orange}
  .showclick, .hideclick {position:relative;width:20%;height:30px}
  
  .grid {position:relative;display:block;min-height:500px;background:grey}
  .grid:after {content:'';display:block;clear:both}
  .box {position:absolute;left:0;top:0;width:100%;height:200px;color:#fff;background:#a2c5bf}
  .box-head {position:relative;display:block;width:100%;height:200px;background:red;overflow:hidden}
  .page {position:relative;width:100%;height:auto;padding:5%;background:yellow}
  
  .footer {position:relative;display:block;width:100%;text-align:center;background:green}
  </code></pre>
  
  <p>Is it possible to calculate the grid (or page) height with jquery with the button click ?</p>
  
  <p>Fiddle is here : <a href="https://jsfiddle.net/igorlaszlo/zcubarw7/1/" rel="nofollow">https://jsfiddle.net/igorlaszlo/zcubarw7/1/</a> </p>