HTML5 / CSS3: 100% de la hauteur de la mise en page pour mobile avec deux divs que des boutons et aucun débordement

Je veux réaliser certains mobiles de la mise en page avec deux divs ou des boutons de remplir la page entière de 50% à 50% (EDIT: unes au-dessous des autres).
Maintenant, quand je fais avec ce 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>

la page est trop élevé.. pas étonnant que la marge de 10px et la 1px frontière agrandir la div... Également d'une enveloppe de div avec un padding de 10px ne résoudra pas le problème.

Comment pourrais-je réaliser cette mise en page lorsque la page n'est pas du défilement (pas de débordement) mais 100% de hauteur, avec deux boutons de remplir la page entière (chacun à 50% ou 70% - 30%), tandis que le bouton lui-même a une marge ou de rembourrage pour obtenir un petit espace à la bordure de page et un ex: 1px solid border?

Je vous remercie à l'avance

^x3ro

OriginalL'auteur x3ro | 2012-02-02