当height:100%不生效时，如何设置div为100%高度？

嘿，这个问题我之前踩过好多次坑！很多教程只提height:100%，却没说它生效的核心前提——CSS百分比高度完全依赖父元素的已定义高度，如果父链上任何一层没有明确设置高度，子元素的height:100%就会“无据可依”，自然不会生效。结合你的需求（让图片和.container高度一致、拉伸适配），给你分步解决的方案：

一、先搞定.container的高度问题 #

首先得确保.container本身能拿到正确的高度参考：

• 如果.container要占满整个视口高度，先给它的父链（html、body）设置明确高度：

  html, body {
    height: 100%;
    margin: 0; /* 去掉默认边距，避免出现不必要的滚动条 */
    padding: 0;
  }
  .container {
    height: 100%; /* 现在父元素有明确高度，这个100%就能正常生效了 */
    /* 可以加个边框方便调试，确认容器高度是否符合预期 */
    border: 2px solid red;
  }
  

• 如果.container嵌套在其他容器里，它的直接父容器也必须设置height（比如固定数值、100%或者100vh），否则.container的height:100%还是会失效。

二、让图片完全填满.container #

解决了容器高度问题，接下来处理图片的适配，要注意图片的默认特性：

.container img {
  display: block; /* 去掉图片默认的inline元素底部间隙 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* 重点！保持图片比例的同时，拉伸填满容器，不会变形 */
  /* 如果允许图片强制变形来完全填满，就用object-fit: fill; */
}

为什么用object-fit？ #

如果只设置width:100%; height:100%;，图片会被强制拉伸变形，而object-fit:cover会裁剪图片的多余部分，既保证比例正确又能填满容器，这是大多数场景的理想选择。

三、针对“部分分辨率下没占满”的额外排查 #

如果还是有个别分辨率下图片没填满，可能是这些原因：

• .container的父元素用了Flex布局：这种情况下别用height:100%，给.container加flex:1，让它自动占满Flex容器的可用空间。
• 容器有内边距（padding）：记得用box-sizing: border-box;让内边距算在容器的宽高里，避免容器实际尺寸超出预期：

  .container {
    box-sizing: border-box;
    padding: 10px; /* 现在内边距不会让容器高度超过父元素 */
  }
  

• 误设了object-fit:contain：这个属性会保持图片比例，在容器内留空白，和你要的“填满”效果相反，检查下有没有写错。

如果还有特殊场景（比如.container是绝对定位、Grid布局的子元素），可以补充细节，我再帮你调整方案～

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