vitya_yanyk

Адаптивная высота
html:

<div class = "fullpage">
     <div id = "screen_1">
     </div>

     <div id = "screen_2">
    </div>
</div>

css:

.fullpage {
	position: relative;
	margin: 0px;
	padding: 0px;
	max-width: 100%;
	min-height: 200%;
	max-height: 200%;
	overflow: hidden;
}
#screen_1, #screen_2 {
	position: absolute;
	left: 0px;

	width: 100%;
	height: 50%;

	margin: 0px;
	padding: 0px;
}
	#screen_1 {
		top: 0px;
	}
	#screen_2 {
		top: 50%;
	}

fullpage - родительский блок с высотой в 2 экрана (200%), который содержит в себе 2 дочерних блока с высотой по 1 экрану каждый (50% от fullpage). У первого top: 0px и высота 50%, у второго top: 50% (т.к. он идёт встык после первого блока). Таким образом, мы можем задать n-е кол-во блоков-экранов с высотой (100% / n) и точкой top для каждого
for (i = 0; i < n; i++) {
top[i] = (100% / n) * i;
}
:)))

Да, а ещё в современных браузерах поддерживается такая клёвая адаптивная штука, как vh и vw, что есть размеры видимой области окна браузера по высоте и ширине соответственно:

.fullpage {
     height: 100vh;      /*--- 100% от высоты видимой области страницы в браузере ---*/
     width: 100vw;     /*--- 100% от ширины ---*/
}

НО! Эта штука не поддерживается на разных мобильных браузерах и на старых версиях обычных браузеров, так что пока эта штука не такая уж и крутая :(