使用CSS百分比设置横幅图片尺寸时元素消失，如何让图片显示并保持屏幕高度10%

嘿，这个坑我之前踩过！你遇到的问题核心在于CSS百分比高度的计算逻辑：当你给元素设置height: 10%时，它是相对于父元素的高度来计算的，但你的.banner的父元素（<body>和<html>）默认高度是auto——也就是由内部内容撑开的高度，而你的横幅本身没有内容，所以父元素高度为0，10%自然也等于0，横幅就消失了。

给你两个靠谱的解决方案：

方案一：给父元素设置明确高度 #

先让<html>和<body>撑满整个视口高度，这样.banner的10%就有了参考基准：

/* 先重置html和body的默认样式，确保撑满视口 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 你的横幅样式保持不变即可 */
.banner{
  background-image:url(img/banner.PNG);
  background-color: rgb(0, 121, 255);
  background-repeat:no-repeat;
  height: 10%;
  width: 100%;
  background-size: 100% 100%;
}

方案二：使用视口单位vh（更简洁） #

如果你不想折腾父元素的高度，可以直接用vh单位——1vh等于视口高度的1%，所以10vh就是正好你想要的屏幕高度10%，不需要依赖父元素：

.banner{
  background-image:url(img/banner.PNG);
  background-color: rgb(0, 121, 255);
  background-repeat:no-repeat;
  height: 10vh; /* 直接指定为视口高度的10% */
  width: 100%;
  background-size: 100% 100%;
}

这个方案更直观，而且现代浏览器都支持vh单位，兼容性完全没问题。

内容的提问来源于stack exchange，提问作者Dunmol