<分区>
<分区>
HTML5 中是否有一条规则不允许在 vh 中设置高度的父项的子项具有 % 高度？
我将图像设置为 100% 高度，其中父容器的高度为 20vh。如果我不指定 <!Doctype html>，这会很好用，但是一旦我添加了该代码，img heigh CSS 就会被忽略，它默认为 native 图像大小。
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>提前致谢
最佳答案
您是正确的，基于百分比的值是基于父级的，但是您的 20vh元素不是 img 的父元素- 它们之间有三个级别。
如果你想要 header 的所有 child 拥有相同的100%高度，你可以这样做:
header * { height: 100%; }
但是，请注意，这不会影响内联元素(例如您的 <a> )，因此您必须将它们设置为 block 显示类型。根据您的用例，您可以执行以下任一操作...
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>关于HTML5 % Height Child of parent with vh 相对高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52940720/