css - Efficient way to set 100% height for all the parents -

css - Efficient way to set 100% height for all the parents -

i want div 100% height of viewport. basic code this:

http://jsfiddle.net/c247opd6/

now, in real web page situation more this:

http://jsfiddle.net/akrv5cgm/ div nested within other divs.

i know code of sec illustration doesn't work because in order element have 100% of height of parent, parent must either have explicitly defined height or 100% of height of parent. fix:

.four, .three, .two { height: 100%; }

however start adding code solution becomes harder , harder mantain. there shorter css rule allow me set 100% height parent divs? nth-child, except parents.

i want div 100% height of viewport.

you utilize viewport relative units:

5.1.2. viewport-percentage lengths: ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

the viewport-percentage lengths relative size of initial containing block. when height or width of initial containing block changed, scaled accordingly.

in case utilize height: 100vh, 1vh equivalent 1% of viewport.

updated example

.one { height: 100vh; background-color: reddish }

browser back upwards these units can found here.

it's worth pointing out element won't take height of direct parent consideration.

css