Height in % - Slow rendering

Question

My context IINM, the percentage-height assumes that he height of the parent is available when the height is calculated. I have a background image for header which is styled like below header{ width: 100%; height:100%; // This height is what I'm talking about font-size: 7em; background: url(../images/landing_image.jpg) no-repeat; background-size: cover; } In my drupal website and I might combine/compress the css files which have the unintended side-effect of reordering. That is, the parent's height might-not be available at the time when 100% of parent's height is calculated. What is a possible workaround? Can I specify the height in terms of the view-port height? height:view-port-height; Also, I didn't completely understand vh units. How does that work? JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

I don't know any other way of specifying the high, but a % should not make a difference.Even if it does make it slower we would only be talking a few of micro seconds slower. Personally i wouldn't worry about that, considering the amount of extra work you would need to put in to find a better solution. that being said after looking at you question again there may be a faster way you could render still using css. like this: header { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; } This would set the header to cover the whole of the page without the need to find out the parent's height.