title: How to make div under responsive rectangle fill width and height of screen?
body: <p>I have adjusted <a href="http://www.stackoverflow.com/questions/20456694/grid-of-responsive-squares#20457076">web-tiki's responsive square elements </a> and I want to create a login screen. </p>
  
  <p>On the login screen I want to use a header, and have the rest of the page fill the height and width of the screen precisely. It should look as follows filling the width and height:</p>
  
  <p><img src="https://i.stack.imgur.com/Fbvh4.png" alt="End result as wished"></p>
  
  <p>Right now the code does not accomplishes this since the [FILL REST OF WIDTH AND HEIGHT WITH BACKGROUND IMAGE] part just resizes outside of my control.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="top"&gt;
      &lt;h1&gt;My header&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;!-- Fixed main screen --&gt;
  &lt;div id="login-screen" class="bg imgloginscreen"&gt;
      &lt;div class="content rs"&gt;
          &lt;div class="float-left"&gt;Some text, blabla&lt;/div&gt;
          &lt;div class="float-right"&gt;
              &lt;form&gt;
                  &lt;input type="text" value="Username"/&gt;&lt;br/&gt;
                  &lt;button type="submit"&gt;Login &lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* Responsive square elements stylesheet is adjusted from http://jsfiddle.net/webtiki/MpXYr/3/light/ which was designed by http://web-tiki.com/ */
  
  #top {
      clear: both;
      margin: 0.25%;
      width: 99.5%%;
      padding: 0.1%;
      background-color: #000;
      color: #fff;
  }
  .imgloginscreen {
      background-image: url('http://upload.wikimedia.org/wikipedia/en/3/37/Leaves.JPG');
  }
  .content {
      position: absolute;
      height: 90%; /* = 100% - 2*5% padding */
      width: 90%; /* = 100% - 2*5% padding */
      padding: 5%;
  }
  /*  For responsive images */
  .content .rs {
      width: auto;
      height: auto;
      max-height: 90%;
      max-width: 100%;
  }
  .float-left {
      float: left;
  }
  .float-right {
      float: right;
  }
  /* Not sure how to make it fill the rest of screen? */
  #login-screen {
      float: left;
      position: relative;
      height: 99.5%;
      width: 99.5%;
      padding-bottom: 50%;
      margin: 0.25%;
      overflow: hidden;
      background-color: #1E1E1E;
  }
  
  body {
      font-family: 'Lato',verdana, sans-serif;
      font-size: 20px;
      color: #fff;
      text-align: center;
      background: #ECECEC;
      margin: 0;
  }
  </code></pre>
  
  <p>I hope someone can help me make it fit in the screen.</p>
  
  <p>Thanks.</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/2shygbcy/2/" rel="nofollow noreferrer">http://jsfiddle.net/2shygbcy/2/</a></p>