如何正确计算窗口高度使#blue_square适配divTwo容器？

AI 小北

2026-7-9

问题解决：#blue_square在小屏设备上定位失效，需在divTwo容器内正确定位

问题背景

通过jQuery代码$("#blue_square").css("top", $(window).height() / 2 - 90)设置蓝色方块的top值时，桌面大屏显示正常，但笔记本、平板、移动设备等小屏设备上定位失效。当前#blue_square的定位起点为浏览器视口，而非父容器divTwo，导致位置不符合预期，需要让它仅在divTwo内部完成定位。

问题根源

核心问题是定位属性使用错误：#blue_square设置了position: fixed，该定位方式是相对于浏览器视口进行定位的，不受父元素position: relative的影响，因此无论如何计算top值，它的定位基准都不会是divTwo容器，这才是小屏失效的本质原因。

解决方案

1. 修改CSS定位规则

将#blue_square的position: fixed改为position: absolute，这样它会基于已设置position: relative的父容器divTwo进行定位：

.divTwo{
    position: relative;
}

#blue_square{
    position: absolute; /* 替换原fixed属性 */
    right: 0;
    z-index: 9;
    width: 370px;
    box-shadow: 0 0 6px transparent;
}

2. 调整jQuery的top值计算逻辑

原来的计算基于窗口高度，现在需要改为基于divTwo容器的高度，同时添加窗口resize事件监听，确保小屏缩放时位置能实时更新：

// 封装计算定位的函数
function adjustBlueSquarePosition() {
    const divTwoHeight = $('.divTwo').height();
    $('#blue_square').css('top', divTwoHeight / 2 - 90);
}

// 页面初始加载时执行一次
adjustBlueSquarePosition();

// 窗口大小变化时重新计算定位
$(window).on('resize', adjustBlueSquarePosition);