如何让含图片的Div适配70%屏幕高度？百分比高度无效求助

问题根源 #

CSS中元素的百分比高度需要依赖父元素有明确的高度值，如果父元素（包括html、body）没有设置高度，子元素的height:70%会被浏览器忽略，只有固定px值能生效。

方法1：使用视口单位（推荐） #

直接用vh（视口高度单位），70vh就是屏幕可视高度的70%，无需依赖父元素高度，元素仍处于文档流中，不会打乱布局，还能正常设置外边距：

.gallery {
  display: block;
  width: 100%;
  height: 70vh; /* 直接对应屏幕高度70% */
  margin: 2rem auto; /* 示例：添加上下外边距，不影响布局 */
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

方法2：给父级设置明确高度 #

如果需要兼容极老浏览器（不支持vh），可以给html和body设置height:100%，让父级拥有明确高度，子元素的百分比高度就能生效：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免出现滚动条 */
}

.gallery {
  display: block;
  width: 100%;
  height: 70%; /* 相对于body的100%高度 */
  margin: 2rem; /* 正常设置外边距 */
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

为什么这两种方法不会打乱布局 #

这两种方案都让.gallery保持在正常文档流中，后续元素会自动排在它下方，不像position:absolute会脱离文档流导致布局混乱，同时也能保留你已设置的图片动画。

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