DIV на всю высоту родителя?

На самом деле свойство height, указанное в %, работает только если для внешнего блока указана высота. Либо для элементов с абсолютным позиционированием. В этом случае нужно указать top 0 и left 0

flex-box
css-tricks.com/boxes-fill-height-dont-squish

Адаптивная высота
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% от ширины ---*/
}

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

Попробуй задать странице display: flex, а дочерним блокам align-self: stretch (+ flex-shrink: 0, если не нужно сжатия блоков) и не забудь, чтобы у дочерних элементов была указана ширина. Для меня такой способ сработал

Вообще-то, div { height: 100%; } даёт как раз высоту родителя. А вот почему у вас высота родителя равна высоте экрана устройства, это уже другой вопрос.

javascript-ом получай высоту родителя и устанавливай её дочернему элементу

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

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

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

Это реально очень крутая штука! Как узнать в каких браузерах не работает?)

Для управления блоками я сделал библиотечку. Мало ли кому нужно. Ссылка на мой гитхаб https://github.com/xakplant/stickjaw