Ответы пользователя по тегу Дизайн
  • DIV на всю высоту родителя?

    @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% от ширины ---*/
    }

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