title: Height more than 100% of browser height
body: <p>I'm building responsive webiste. I don't want to set a default height in px, but I want to to something like this. This will be only top of layout. E.g. <a href="http://prowly.com" rel="nofollow noreferrer">prowly.com</a>.</p>
  
  <p><img src="https://i.stack.imgur.com/jTVWO.png" alt="enter image description here"></p>
  
  <p>And my fiddle:</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/QVxW8/1/" rel="nofollow noreferrer">http://jsfiddle.net/QVxW8/1/</a></p>
  </blockquote>
  
  <pre><code>        html, body {
              margin: 0;
              padding:0;
          }
          div#handler {
              width: 100%;
              height: 110%;
              display:block;
          }
          div#content {
              width: 100%;
              height:100%;
              background: red;
          }
          div#content2 {
              width: 100%;
              height: 10%;
              background: blue;
          }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="handler"&gt;
          &lt;div id="content"&gt;I want to 100% height of browser&lt;/div&gt;
          &lt;div id="content2"&gt;I want 10% of height browser&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Ps. As I also saw, 100% of height it's buggy on Safari iPhone and Opera Mobile so I don't know what should I do. Of course I can use JS but I want to know is there other way?</p>