0

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?

sjsam
  • 21,411
  • 5
  • 55
  • 102
  • 2
    Yes you can use `vh` units. If that is what you meant. – Mr_Green Sep 02 '16 at 07:24
  • @Mr_Green Thanks . Would that make a speed difference as I guessed? – sjsam Sep 02 '16 at 07:26
  • https://css-tricks.com/viewport-sized-typography/ see complete ref here – Ismail Farooq Sep 02 '16 at 07:26
  • Don't know much about performance difference between `100vh` and `100%`. But I think `vh` would be faster because it is related to css3. – Mr_Green Sep 02 '16 at 07:27
  • Possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) – Ismail Farooq Sep 02 '16 at 07:27
  • I can't see any reason why vh vs % vs px would make any difference unless you're constantly changing the height on a frame by frame basis. And even then, it's unlikely it would make any difference. What are you basing your conclusions on? – Whothehellisthat Sep 02 '16 at 07:28
  • @IsmailFarooq : That question you've linked has nothing to do with this one. I'm not asking how to make height 100%. – sjsam Sep 02 '16 at 07:29
  • Could you provide an example page, where such calculations could provide a noticeable delay on page load? I guess what `vh` faster than `%`, and `px` will be the fastest, cause `vh` is being converted to `px` anyway, but doesn't require parent height calculation; but it's still only a guess unless it'll be properly tested. – Denis Sheremet Sep 02 '16 at 08:19
  • @DenisSheremet : I'm afraid that is not possible at the moment coz the page is still locally hosted but I can keep you posted on this. – sjsam Sep 02 '16 at 08:27

1 Answers1

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.

blobbymatt
  • 317
  • 1
  • 2
  • 17