Как грамотно реализовать 1экран лендинга во всю высоту браузера?

Всем привет!
Дано:

<div class="box">
			<p class="title">ТЕКСТ</p>
			<p class="info">ТЕКСТ2</p>
			<div class="button">
				<a href="">КНОПКА</a>
			</div>
		</div>

.box {
                 padding-top: 20vh;
                 height: 100vh;
        }
       .button {
	         margin: 12vh auto 0;
       }

Вопрос: Как грамотно адаптировать?
Сделал через медиа запросы по ширине, затем заметил, что button часто вылазит за пределы 1 экрана.
Пока вижу решение через медиа запросы по высоте.
Может есть более красивое решение, чтобы кнопка помещалась в 1 экран?