title: 100% Div height with jQuery
body: <p>I'm having some trouble setting my Div to 100% of the window and would love some help figuring this out.</p>
  
  <p>Here is the abbreviated html...</p>
  
  <pre><code>&lt;div id="full-slider-wrapper"&gt;
    &lt;div id="full-slider"&gt;
      &lt;div class="slide-panel active"&gt;
         CONTENT
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the relevant CSS:</p>
  
  <pre><code>/*SLIDER
  ===================================
  */
  
  #full-slider-wrapper {
      overflow: hidden;
  }
  
  #full-slider {
      position: relative;
      width: auto;
      min-height: 1250px;
      margin: 0 auto;
  }
  
  #full-slider .slide-panel {
      position: absolute;
      top: 0;
      left: 0;
      width: auto;
      visibility: hidden;
  }
  
  #full-slider .slide-panel.active {
      visibility: visible;
       } 
  </code></pre>
  
  <p>I've been using min-height: 1250px; as a workaround, but I'm using the SKELETON theme and when I resize the window, the content shrinks and I'm left with a large amount of empty space between the content and footer.</p>
  
  <p>I know there have been a lot of similar questions asked, but I can't seem to get any of the solutions to work. It seems like my best option is to utilize some jQuery like below:</p>
  
  <pre><code>$(function() {
      $(window).resize(function() {
          $('div:full-slider').height($(window).height() - $('div:full-slider').offset().top);
      });
      $(window).resize();
  });
  </code></pre>
  
  <p>Unfortunately I'm not very proficient with jQuery and whenever I try to implement the above or something similar, my content disappears.</p>
  
  <p>Thanks in advance for the help!</p>