如何在position:absolute的.photo div中用height:100%显示完整图片高度？

嘿，我来帮你搞定这个头疼的height:100%不生效问题～

首先得搞清楚为什么会这样：absolute定位的元素设置百分比高度时，必须依赖最近的非static定位父元素有明确的高度值。看你给的代码，.outside是relative定位，但它的高度是由内部内容自动撑开的（因为用了inline-table），没有明确的高度设定，所以.photo的height:100%找不到参考基准，自然就不生效了。

下面给你几个不用px单位的解决方案，按需选择：

方案1：构建完整的百分比高度链 #

如果希望.photo撑满整个视口高度的话，可以从根节点开始设置百分比高度，让每个父级都有明确的高度参考：

/* 先给根元素设置高度 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 给你的.outside也设置height:100% */
.outside{ 
  width: 80%; 
  max-width: 595px; 
  position: relative; 
  margin: auto 0px; 
  display: inline-table; 
  margin-bottom: 50px; 
  border: 1px solid #cccccc; 
  padding: 0; 
  border-radius: 8px; 
  box-shadow: 0px 1px 7px 0px #cfcfcf; 
  margin-top: 7px;
  height: 100%; /* 添加这行 */
}

.photo {
  position: absolute;
  height: 100%;
  width: 100%; /* 可选，让图片占满宽度 */
  top: 0;
  left: 0;
}

⚠️ 注意：如果.outside不需要撑满屏幕高度，这个方法可能不适合，换下面的方案。

方案2：用Flexbox/Grid布局让父级自动撑开高度 #

Flex和Grid是现代布局的利器，能轻松让子元素占满父级高度：

Flexbox版本 #

.outside{ 
  /* 保留原有样式，把display从inline-table改成flex */
  display: flex;
  flex-direction: column;
  position: relative;
  /* 其他样式不变 */
}

.container{ 
  width: 100%; 
  margin-left: auto; 
  margin-right: auto; 
  display: inline-block;
  flex: 1; /* 让container占满.outside的剩余高度 */
  position: relative; /* 如果.photo是在container里面的话 */
}

.photo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

Grid版本 #

.outside{ 
  /* 保留原有样式，添加grid布局 */
  display: grid;
  grid-template-rows: 1fr; /* 让行占满可用高度 */
  position: relative;
  /* 其他样式不变 */
}

.container{ 
  position: relative; /* 给.photo提供定位参考 */
  /* 其他样式不变 */
}

.photo {
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left: 0，自动填满父级 */
  height: 100%;
  width: 100%;
}

方案3：用inset: 0替代height:100% #

这是最简洁的方法，对于absolute定位的元素，设置inset: 0可以让它自动填满最近定位父元素的所有可用空间，不需要手动设置height和width：

.photo {
  position: absolute;
  inset: 0; /* 覆盖top、right、bottom、left为0 */
  object-fit: cover; /* 可选，如果图片比例和容器不一致，用这个保持图片比例不拉伸 */
}

只要.photo的父元素（比如.container或.outside）是relative/absolute/fixed定位，这个方法就能直接生效，非常省心！

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