lavezzi1
@lavezzi1

Vh — px. Как правильнее реализовать?

Здравствуйте. Верстая страницу столкнулся с задачкой. Шапка должна быть такой - пространство высотой 120рх в которм будет лого и навигация, затем бэкграунд с картинкой, которая должна занимать все оставшееся пространство браузера. Имеем такой код:
<body>
<nav>
			<ul>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
			</ul>
		</nav>
	<header>
		<div class="logotype">Logotype</div>
		<h1>Title</h1>
	</header>
</body>


header {
	height: calc(100vh - 120px);
	background-color: #AAADAE;
	background-image: url(background.jpg);
	background-size: cover;
	background-position: center;
}
nav {
	height: 120px;
}


Слышал что с calc в css есть баги в Safari. Какое альтернативное решение предложите? Спасибо
  • Вопрос задан
  • 2626 просмотров
Решения вопроса 1
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
1) calc про который вы уже написали сами
2) Js (так себе вариант)
3) Использовать padding-top: 120px для header, а nav поместить вверху с position: absolute. Внутри header создать блок с height: 100%, он в свою очередь благодаря паддингу родительского элемента займет все оставшееся пространство, вычитая паддинг. И там уже делайте что-хотите.
Естественно у header должен быть position: relative и для элементов должен быть задан box-sizing: border-box;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы