HTML5 / CSS3: макет со 100% высотой для мобильных устройств с двумя div в качестве кнопок и без переполнения

Я хочу реализовать мобильный макет с двумя блоками или кнопками, которые заполняют всю страницу от 50% до 50% ( РЕДАКТИРОВАТЬ: друг под другом) . Теперь, когда я делаю это с помощью этого кода

* {
    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>

, страница слишком высока ... Неудивительно, поскольку поле в 10 пикселей и граница в 1 пиксель увеличивают div ... Также div-оболочка с отступом в 10 пикселей не решит проблему .

Как я мог реализовать этот макет, в котором страница не прокручивается (не переполняется), а имеет высоту 100%, с двумя кнопками, заполняющими всю страницу (каждая на 50% или 70% - 30% или около того), а сама кнопка имеет поле или отступ, чтобы оставить небольшое пространство до границы страницы и, например, Сплошная граница 1px?

Заранее спасибо

^ x3ro