title: HTML5 / CSS3: 100% height layout for mobile with two divs as buttons and no overflow
body: <p>I want to realize some mobile layout with two divs or buttons that fill the whole page 50% to 50% <em>(<strong>EDIT:</strong> underneath each other)</em>. 
  Now when I do it with this code</p>
  
  <pre class="lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
  }
  
  html, body {
      height: 100%;
  }
  
  section {
      height: 50%;
  }
  
  section&gt;div {
      height: 100%;
      border: 1px solid black;
      margin: 10px;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;section&gt;
      &lt;div&gt;text1&lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
      &lt;div&gt;text2&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>the page is way too high.. Hardly surprising as the 10px margin and the 1px border enlarge the div... Also a wrapper div with a padding of 10px won't solve the problem.</p>
  
  <p>How could I realize this layout where the page is not scrolling (not overflowing) but 100% heigh, with two buttons filling out the complete page (each at 50% or 70% - 30% or so) while the button itself has a margin or padding to get a small space to the page border and a e.g. 1px solid border?</p>
  
  <p>Thank you in advance</p>
  
  <p>^x3ro</p>