title: Set width and height to div as percent
body: <p>There are three <code>divs</code>, one of them is parent and two are children. The first child has always 100px height, the second child has rest of parent's height and both of them have parent's width. I want to use it to make my parent div responsive(fullscreen). There is my code for this task:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          #parent{
              position: relative;
              background-color: red;
              width: 200px;
              height: 400px;
          }
          #firstChild{
              margin-left: 5px;
              margin-right: 5px;
              position: absolute;
              background-color: green;
              width: -moz-calc(100% - 10px);
              width: -webkit-calc(100% - 10px);
              width: -o-calc(100% - 10px);
              width: calc(100% - 10px);
              height: 100px;
          }
          #secondChild{
              margin-left: 5px;
              margin-right: 5px;
              position: absolute;
              background-color: blue;
              width: -moz-calc(100% - 10px);
              width: -webkit-calc(100% - 10px);
              width: -o-calc(100% - 10px);
              width: calc(100% - 10px);
              height: -moz-calc(100% - 100px);
              height: -webkit-calc(100% - 100px);
              height: -o-calc(100% - 100px);
              height: calc(100% - 100px);
              margin-top: 100px
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="parent"&gt;
          &lt;div id="firstChild"&gt;&lt;/div&gt;
          &lt;div id="secondChild"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.fullscreen-min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          document.addEventListener('mousedown', onDocumentMouseDown, false);
          function onDocumentMouseDown(){
              $("#parent").fullScreen(true);
          }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>it works great as a normal screen and as a fullscreen:</p>
  
  <p><a href="https://i.stack.imgur.com/bZYuu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bZYuu.png" alt="enter image description here"></a></p>
  
  <p>problem is when I tried to change first and second divs(constant 100px should be on bottom):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          #parent{
              position: relative;
              background-color: red;
              width: 200px;
              height: 400px;
          }
          #firstChild{
              margin-left: 5px;
              margin-right: 5px;
              position: absolute;
              background-color: green;
              width: -moz-calc(100% - 10px);
              width: -webkit-calc(100% - 10px);
              width: -o-calc(100% - 10px);
              width: calc(100% - 10px);
              height: calc(100% - 100px);
          }
          #secondChild{
              margin-left: 5px;
              margin-right: 5px;
              position: absolute;
              background-color: blue;
              width: -moz-calc(100% - 10px);
              width: -webkit-calc(100% - 10px);
              width: -o-calc(100% - 10px);
              width: calc(100% - 10px);
              height: 100px;
              margin-top: -moz-calc(100% - 100px);
              margin-top: -webkit-calc(100% - 100px);
              margin-top: -o-calc(100% - 100px);
              margin-top: calc(100% - 100px);
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="parent"&gt;
          &lt;div id="firstChild"&gt;&lt;/div&gt;
          &lt;div id="secondChild"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.fullscreen-min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          document.addEventListener('mousedown', onDocumentMouseDown, false);
          function onDocumentMouseDown(){
              $("#parent").fullScreen(true);
          }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the result is:</p>
  
  <p><a href="https://i.stack.imgur.com/wGRD8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wGRD8.png" alt="enter image description here"></a></p>
  
  <p>I'm not sure why it doesn't work when the first div's height is in percent and the second height is represented by the constant value. Can anyone explain what is wrong with my code and why doesn't it work?</p>