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

Question

[ZMaxonchik]

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

<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 экран?

Comments

[Максим]

скрииншот желаемого поведения можете показать ?

[FeST1VaL]

Так, а зачем в отступ давать в vh? задайте его в пикселях

[ZMaxonchik]

Артем Будин, как это поможет?)

[ZMaxonchik]

Максим Ленский, да вот сам думаю пока. Необходимо, чтобы при любом разрешении все было на первом экране.

[FeST1VaL]

ZMaxonchik, да по сути никак) просто без общей картины мы можем накидывать только догадки. Я это имел ввиду) Песочницу было бы неплохо увидеть)

Answer 1

[organica]

Я не знаток, но бутстрап точно поможет :)

Answer 2

[Анатолий Куликов]

Сделайте .box флексом, внутренности оберните в ещё один контейнер и ему выставите равнение по центру. Где-то вот так:

.box {
    display: flex;
    width: 100%;
    height: 100vh;
}
.box__inner_wrap {
    display:  block;
    width: 100%;  // или какая нужна
    margin: auto;
}

У других элементов уже настроиваете размеры, отступы и прочее. Используйте медиа-запросы, чтобы подогнать под нужные вам размеры экрана.

Comments

[Анатолий Куликов]

Да, забыл, всем элементам можно установить box-sizing: border-box.

[ZMaxonchik]

Спасибо! Правильно я понимаю, что в таком случае элементы не будут вылазить снизу из .box?

[Анатолий Куликов]

ZMaxonchik, да, единственное, что нужно поработать с медиа-запросами. Для успокоения души можно на .box навесить overflow: hidden.