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

Question

[Unknown]

Привет!
Как сделать чтобы главная страница была одинаковой высоты в любом браузере?
Сравниваю Chrome и Firefox. Вижу такую картину.
Chrome:

Firefox (обратите внимание на низ, видно плохо, но если присмотреться...)>:


По умолчанию ставлю высоту окна 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">  - сын

Comments

[Сергей delphinpro]

гадаю на верстку по картинкам...
ну что вы как детском садике? где код в песочнице с воспроизведенной проблемой?

[kulaeff]

А верстка где?

[alvvi]

height: 880px  - подгоняю размер под текущее окно
min-height: 880px

что это такое?
где 100vh то?

[Unknown]

Илья Ростопка: тут я ошибся, 100vh обычно делал в других верстках, но разницы нет px или vh это всего лишь единицы измерения

[alvvi]

Richswitch: то есть по вашему разницы между 100vh и 800px - нет? Вы точно знаете, что такое vh?

[Unknown]

Илья Ростопка:

единицы измерения

[Kovalsky]

Richswitch: верно, но px это абсолютная единица измерения, а vh - относительная. Поэтому vh в плане "сделать первую странцу одинаковой высоты для любого браузера" абсолютно не канает. Зато вполне канает когда нужно сделать, чтобы блок был высоты вьюпорта.

[Unknown]

Никита Полевой: да, спасибо. Дали ссылку, читаю об этом.

Answer 1

[Fierfoxik]

body,html{
height: 100%
}
#start-window{
height: 100%
.start-window__background-main{
height: 100%
}
}

Прочие варианты

Comments

[Unknown]

Спасибо

Answer 2

[Максим Тимофеев]

Но штото сколько я не задавал height: 100%

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

height: 880px
min-height: 880px

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

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

где пример?

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

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

Comments

[Unknown]

за ссылку спс