title: 100% height using fixed position
body: <p>I'm using position: fixed; to make a div adjusting to different screen sizes. The height is set to 100% in this simplified example to make the div "example" always take up the whole height of the screen. What I want to do is making space both over and under this div and I'm doing so by using <code>position: fixed;</code> and <code>top: 100px; bottom: 100px;</code></p>
  
  <p>The problem is that the code only runs <code>top: 100px;</code> not both. Is there any way around this problem?</p>
  
  <p><a href="http://jsfiddle.net/dqswf41w/" rel="nofollow">Fiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="example"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>#example {
    background-color: #333;
    width: 500px;
    height: 100%;
    position: fixed;
    bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
    top: 100px;
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>And if I set the height using this function istead of setting height in css to 100%. How do I do then?</p>
  
  <pre><code>$(document).ready(function() {
    function setHeight() {
      windowHeight = $(window).innerHeight();
      $('#example').css('min-height', windowHeight);
    };
    setHeight();
  
    $(window).resize(function() {
      setHeight();
    });
  });
  </code></pre>