html - Height in % - Slow rendering -

my context

iinm, percentage-height assumes height of parent available when height calculated.

i have background image header styled below

header{     width: 100%;     height:100%; // height i'm talking     font-size: 7em;     background: url(../images/landing_image.jpg) no-repeat;     background-size: cover; } 

in drupal website , might combine/compress css files have unintended side-effect of reordering. is, parent's height might-not available @ time when 100% of parent's height calculated. possible workaround? can specify height in terms of view-port height?

height:view-port-height; 

also, didn't understand vh units. how work?

i don't know other way of specifying high, % should not make difference.even if make slower talking few of micro seconds slower.

personally wouldn't worry that, considering amount of work need put in find better solution.

that being said after looking @ question again there may faster way render still using css. this:

header {  position:fixed !important;  position:absolute;  top:0;  right:0;  bottom:0;  left:0; } 

this set header cover whole of page without need find out parent's height.