title: How to place the block on the top of "second" screen using CSS?
body: <p><strong>Problem</strong>: I have the page, where first screen (regardless of the screen resolution) is completely taken by block with beautiful background and "Sign up" button at the very bottom of this block <a href="http://jsfiddle.net/tXpj7/1/" rel="nofollow">JSFiddle</a> (it's only for mobile version of the site, but it doesn't matter in this case)</p>
  
  <pre><code>&lt;div class="first-screen"&gt; 
      &lt;div class="about"&gt;
          &lt;h1&gt;Motto&lt;/h1&gt;
          &lt;a href="#" class="btn btn-primary btn-block"&gt;Click here&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.first-screen {
      position: absolute;
      top: 55px;
      right: 0;
      bottom: 0;
      left: 0;
      background: url('http://placehold.it/1000x1000&amp;text=first screen') transparent no-repeat;
      background-size: 100% 100%;
      padding: 0;
      margin: 0;      
  }
  </code></pre>
  
  <p><strong>Task</strong>: I need other content on the page to be displayed right after the first screen (right now it is under the <code>.first-screen</code> because of <code>position: absolute;</code>);</p>
  
  <p><strong>Challenge</strong>: I need this task to be solved <strong>without any JS</strong> (I can solve it using js, but I don't want to). </p>
  
  <p>Any working solutions (using <code>display: table, table-row, table-cell;</code>, flexboxes etc.) or any suggestions will be appreciated.</p>
  
  <p><strong>Note</strong>: it can be hacked with setting the <code>margin-top</code> for the <code>.second-screen</code>, but it isn't bulletproof at all.</p>
  
  <p>Thanks in advance!</p>