@Richswitch
junior

Как сделать первую странцу одинаковой высоты для любого браузера?

Привет!
Как сделать чтобы главная страница была одинаковой высоты в любом браузере?
Сравниваю Chrome и Firefox. Вижу такую картину.
Chrome:
42deb5bf0b3d4776800d1b8167336b1e.png
Firefox (обратите внимание на низ, видно плохо, но если присмотреться...)>:
63f2764c8ce54ff0bc23b0efcd20ee6e.png

По умолчанию ставлю высоту окна 880px. Но в разных браузераx работает это таким образом. Логично было бы подумать что нужно с помощью % проблему решать. Но штото сколько я не задавал height: 100% не помогает, может быть это вовсе с помощью скриптов решается?

UPD: Код CSS (SASS), вставка background
#start-window
	text-align: center
	background-color: $emerald
	position: relative
	.start-window__background-main
		background-image: url(../img/background.png)
		background-size: cover
		background-repeat: no-repeat
		background-position: center center
		height: 880px  - подгоняю размер под текущее окно
		min-height: 880px
		position: relative
		width: 100%
		z-index: 49

<div class="container-fluid">
			<div class="row">
				<div class="col-md-12 fullWindow">
					<div id="start-window">   - родитель 
						<div class="start-window__background-main">  - сын
  • Вопрос задан
  • 226 просмотров
Решения вопроса 1
@Fierfoxik
body,html{
height: 100%
}
#start-window{
height: 100%
.start-window__background-main{
height: 100%
}
}

Прочие варианты
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Но штото сколько я не задавал height: 100%

потому что он работает, только если предку четко height указать. Браузер не может рассчитать % от хрен его знает скольких.
height: 880px
min-height: 880px

Какой смысл min-height задавать?

По умолчанию ставлю высоту окна 100vh

где пример?

Но в разных браузераз работает это таким образом

Каким таким? 2 одинаковые картинки. Или расскажите где разница в них? Учтите что vh - рассчитывается от viewport, вот Вам чтиво в помощь:
https://itchief.ru/lessons/html-and-css/meta-viewp...
Ответ написан
Ваш ответ на вопрос

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

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