基于vh垂直对齐元素适配全分辨率的响应式布局问题求助

嘿，我太懂你这种在响应式布局里卡定位的痛苦了！你碰到的核心问题其实是容器高度没有正确绑定视口，导致你的bottom定位并不是相对于浏览器视口，而是相对于父容器的底部——一旦分辨率变化，父容器高度跟着变，图片位置自然就乱了。

先帮你理清楚之前代码里的问题：你的.personWrapper同时写了height:100%和height:auto，这两个属性会冲突，最终生效的是auto，意味着容器高度由内部内容决定，而不是占满视口。这样里面的绝对定位元素自然没法锚定到视口底部。

下面给你两个靠谱的解决方案，任选其一就行：

方案一：给外层容器绑定视口，内部绝对定位 #

把外层容器改成固定定位占满视口，然后内部容器绝对定位到底部：

/* 修改后的 .personWrapper */
.personWrapper {
  position: fixed; /* 直接固定在视口层面 */
  width: 100%;
  height: 100vh; /* 强制占满整个视口高度 */
  z-index: 91;
  top: 0;
  left: 0;
}

/* .personPositioning 定位到底部 */
.personPositioning {
  position: absolute;
  bottom: 0;
  left: 0; /* 可以根据需求调整水平位置，比如居中就用 left:50%; transform: translateX(-50%); */
}

/* 可选：让图片自适应视口宽度 */
.person {
  max-width: 100%;
  height: auto;
}

方案二：直接给图片设置固定定位 #

如果不需要外层容器的额外布局，更简单的方式是直接给图片加固定定位，跳过中间容器：

.person {
  position: fixed;
  bottom: 0;
  left: 0; /* 按需调整水平位置 */
  z-index: 91; /* 确保层级不被其他元素遮挡 */
  max-width: 100%; /* 响应式适配，防止图片溢出视口 */
  height: auto;
}

关键原理说明 #

position: fixed的元素是相对于浏览器视口定位的，不管页面滚动还是分辨率变化，它的位置都会固定在视口的对应位置，完美解决你之前响应式测试时布局混乱的问题。

另外要注意：如果页面里还有其他z-index更高的元素，记得调整.person或者外层容器的z-index值，避免图片被遮挡。

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