HTML区块无文本时背景图不显示，百分比高度失效问题咨询

核心原因：百分比高度的生效依赖父元素高度 #

• 当你给section设置height:100%时，CSS的百分比高度是相对于父元素已明确设置的高度计算的。如果父元素（比如body或上层容器）没有设置固定高度（默认是height:auto，由内容撑开），那么section的height:100%会被浏览器解析为auto——也就是元素高度完全由内部内容决定。
• 所以当section内无文本时，高度为0，背景图自然无法显示；有文本时，高度仅等于文本的行高，背景图也就只覆盖这个区域。
• 而设置像素值高度时，元素有了明确的固定高度，不管内容多少，背景图都会填充这个指定的高度范围，因此能正常显示。

可行的解决办法 #

• 给父元素设置明确高度：如果section的直接父元素是body，可以给html和body都设置height:100%;，这样section的height:100%就能基于父元素的高度生效：

  html, body {
    height: 100%;
    margin: 0; /* 去掉默认边距避免滚动条 */
  }
  section {
    height: 100%;
    width: 50%;
    background-image: url('你的背景图路径');
  }
  

• 使用视口单位vh：直接用height:100vh代替height:100%，vh是相对于视口高度的单位，100vh就是占满整个浏览器可视区域的高度，不需要依赖父元素的高度设置：

  section {
    height: 100vh;
    width: 50%;
    background-image: url('你的背景图路径');
  }
  

• 设置min-height：如果需要元素至少占满高度，同时能随内容撑开，可以用min-height:100%（同样需要父元素设置明确高度）：

  html, body {
    height: 100%;
    margin: 0;
  }
  section {
    min-height: 100%;
    width: 50%;
    background-image: url('你的背景图路径');
  }
  

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