Адаптивная высота
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% от ширины ---*/
}
НО! Эта штука не поддерживается на разных мобильных браузерах и на старых версиях обычных браузеров, так что пока эта штука не такая уж и крутая :(
