Question

HTML5中是否存在一条规则，不允许在vh中设置了高度的父母的孩子的身高为％？

我将图像设置为100％高度，其中父容器的高度为20vh。如果我未指定<!Doctype html>，则效果很好，但是一旦添加该代码，就会忽略img heigh CSS，并且默认为原始图像大小。

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>

预先感谢

Answer 1

您正确的是，基于百分比的值基于父级，但是您的20vh元素不是img的父级 -之间存在三个层次他们。

如果您希望所有header的孩子都具有相同的100%身高，则可以执行以下操作：

header * { height: 100%; }

但是，请注意，这不会不会影响内联元素（例如<a>），因此您必须将其设置为块显示类型。根据您的用例，您可以选择...

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

...或...

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

工作示例

（我在img上添加了黑色边框，以表明它具有适当的高度。）

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>

相对高度为HTML的父级的HTML5％高度子级

1 个答案:

工作示例