基于父容器固定高度和子元素top值调整子元素高度问题求解

问题原因 #

你的代码核心问题有两点：

• 子元素顶部距离计算逻辑错误：offset()方法返回的是元素相对于整个文档的坐标，你使用$('.parent').offset().top - $('.child').offset().top计算得到的是负值，代入公式后会得到远大于预期的高度，不符合需求。
• 缺少定位上下文：父元素未显式设置position: relative，如果子元素使用绝对定位，定位基准会是全局文档而非父元素，导致top取值不符合预期。

修正方案 #

1. 先补充必要的CSS样式：

.parent {
  height: 400px;
  position: relative; /* 作为子元素的定位基准 */
  border: 1px solid #eee; /* 可选，用于可视化边界 */
}
.child {
  position: absolute;
  top: 40px; /* 你场景中固定的top值，也可动态设置 */
  border: 1px solid #f33; /* 可选，用于可视化边界 */
}

2. 修正JS逻辑：

var __parentHeight = $('.parent').height();
// 直接获取子元素相对于父元素的top距离
var __distanceFromTop = $('.child').position().top;
var __finalHeight = parseInt(__parentHeight) - parseInt(__distanceFromTop);

$('#parentHeight').html(__parentHeight + 'px');
$('#distanceFromTop').html(__distanceFromTop + 'px');
$('#childHeight').html(__finalHeight + 'px');

$('.child').css('height', __finalHeight + 'px');

如果需要适配父元素高度动态变化、窗口大小调整等场景，可以把上述逻辑封装为函数，在对应的触发事件（如resize、DOM更新）中重新调用即可。

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