HTML5 % Height Child of Parent with vh Relative Height

Question

Is there a rule in HTML5 that does not allow for a child of a parent with height set in vh to have a % height?

I am setting an image to 100% height where a parent container has a height of 20vh. This works great if I don't specify the <!Doctype html>, but once I add that code then the img heigh CSS is ignored and it defaults to the native image size.

header {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 10;
  height: 20vh; }

#mainLogo {
  text-align: center; }
  
#mainLogo img {
  height: 100%;
  width: auto; }

    <header>
      <div class="container">
        <div id="mainLogo">
          <a href="#">
            <img src="img/mainLogo.png"/>
          </a>
        </div>
      </div>
    </header>

Thanks in advance

Could I make all of the children below
have a height of 100% or do I need to set the 20vh at the child or direct parent level? — AggieZig, Oct 23 '18 at 03:41
try putting `height: 100%` to both `.container` and `#mainLogo`. — Ibrahim, Oct 23 '18 at 04:16

score 0 · Accepted Answer · answered Oct 23 '18 at 03:52

You're correct that a percentage-based value is based on the parent, however your 20vh element is not the parent of img - there are three levels between them.

If you wanted all children of header to have the same 100% height, you could do:

header * { height: 100%; }

However, note that this will not affect inline elements (like your <a>), and so you'd have to set those to a block display type. Depending on your use-case, you could do either...

header * { height: 100%; display: block; }

...or...

header * { height: 100%; }
header a { display: inline-block; }

Working Example

(I've added a black border to img just to show that it has the proper height.)

header {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 10;
  height: 20vh;
}

header * {
  height: 100%;
  display: block;
}

#mainLogo {
  text-align: center;
}

#mainLogo img {
  width: auto;
  border: 1px solid black;
}

<header>
  <div class="container">
    <div id="mainLogo">
      <a href="#">
        <img src="img/mainLogo.png" />
      </a>
    </div>
  </div>
</header>

This fixed the img height issue, but forced the img below the header. I can bring the image back up into the header by having all children display: inline-block, but then lose my text-align: center. — AggieZig, Oct 23 '18 at 17:08

HTML5 % Height Child of Parent with vh Relative Height

1 Answers1

Working Example