CSS如何获取position:absolute的div高度 实现兄弟元素等高

position: absolute定位的元素会脱离正常文档流，父元素计算高度时不会将其纳入计算范围，因此正常文档流内的.second-child无法直接通过原生CSS属性读取它的高度实现等高，以下是两种可直接落地的实现方式：

方案1：纯CSS实现（优先推荐，无JS依赖） #

不需要保留绝对定位逻辑，改用Grid布局实现两层叠加，天然支持两个子元素等高，适配所有屏幕尺寸，性能最优。
直接替换原有CSS代码即可，HTML结构不用改动：

.parent {
  display: grid;
  position: relative;
}

/* 两个子元素放置在同一网格单元格，实现叠加效果 */
.first-child,
.second-child {
  grid-area: 1 / 1 / -1 / -1;
}

.first-child {
  width: 100%;
  z-index: -1;
}

.first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片不变形，铺满整个背景区域 */
}

.second-child {
  position: relative;
  width: 250px;
  justify-self: end; /* 实现内容块靠右对齐，替换原flex布局的对齐属性 */
  /* 无需手动设置高度，网格布局会自动让两个子元素高度保持一致 */
}

这个方案下，不管是图片加载后的自然高度，还是文字内容变多撑开的高度，两个子元素都会自动同步为两者的最大高度，完全满足响应式需求。

方案2：JS动态同步高度（适配必须保留原有绝对定位结构的场景） #

如果业务要求不能改动现有定位逻辑和DOM结构，可以通过尺寸监听的方式动态同步两个元素的高度：

1. 首先给图片补上基础样式，保证响应式缩放时尺寸计算正确：

.first-child img {
  width: 100%;
  height: auto;
}

2. 在页面中加入以下脚本：

const firstEl = document.querySelector('.first-child');
const secondEl = document.querySelector('.second-child');
const foodImg = firstEl.querySelector('img');

const updateHeight = () => {
  secondEl.style.height = `${firstEl.offsetHeight}px`;
};

// 图片加载完成后同步一次高度
foodImg.addEventListener('load', updateHeight);
// 监听元素尺寸变化、窗口缩放，实时同步高度
const observer = new ResizeObserver(updateHeight);
observer.observe(firstEl);
window.addEventListener('resize', updateHeight);

补充：如果你提前知道美食图片的固定宽高比，还可以直接给父元素设置aspect-ratio: 图片宽/图片高属性，再给.second-child设置height: 100%即可，不需要改布局也不需要JS，但是灵活性较差，更换不同比例的图片时需要同步修改CSS值。

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