HTML5 / CSS3: 100% height layout for mobile with two divs as buttons and no overflow

Question

I want to realize some mobile layout with two divs or buttons that fill the whole page 50% to 50% (EDIT: underneath each other). Now when I do it with this code

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

section {
    height: 50%;
}

section>div {
    height: 100%;
    border: 1px solid black;
    margin: 10px;
}

<section>
    <div>text1</div>
</section>
<section>
    <div>text2</div>
</section>

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.

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?

Thank you in advance

^x3ro

Answer 1

To make it even more simple, couldn't you just use CSS box-sizing - which would be supported in most mobile browsers...(I included vendor prefixes for the example).

See example here

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

section {
    height: 50%;
    width: 100%;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
}

section div {
    height: 100%;
    background-color: #333;
    border: 1px solid orange;
    color: white;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}

The box sizing property ensures that the height and width of an element aren't affected by borders, padding, or margins.