javascript - 根据 vh 将垂直元素对齐到所有分辨率

Question

我有一些元素作为图层工作(所有元素都是绝对定位的并且带有 z-index)。

主要的问题是，我有一张图片应该放在 我的视口(viewport)高度 (vh) 的底部 0

我已经尝试过底部定位、垂直对齐和平移，这些解决方案有时会起作用，但只适用于我的原始分辨率，当我开始测试响应式时，它们就搞砸了! (即使我使用 % of positioning)。

这是我的最后一张照片:

    <div className={`${styles.personWrapper} hidden-xs hidden-sm`}>
      <div className={styles.personPositioning}>
        <img src={person} className={styles.person} alt="person" />
      </div>
    </div>

CSS

.personWrapper {
  width: 100%;
  height: 100%;
  height: auto;
  z-index: 91;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.personPositioning {
  overflow:hidden;
}

.person {
  width: 43.4%;
  display: inline-block;
  position: absolute;
  z-index: 60;
  opacity: 0;
  animation: fadein 0.1s 2.4s;
  animation-fill-mode: forwards;
  bottom: -10px;
  // transform: translate(58%,22%);
}

其他尝试:

.personWrapper {
  width: 100vw;
  height: 100vh;
  z-index: 91;
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
}

.personPositioning {
  overflow:hidden;
}

.person {
  width: 43.4%;
  display: inline-block;
  position: absolute;
  z-index: 60;
  opacity: 0;
  animation: fadein 0.1s 2.4s;
  animation-fill-mode: forwards;
  bottom: -10px;
  // transform: translate(58%,22%);
}

Answer 1

解决方案:我已经填充了整个包装 div 和掉落的 div 我在下一个 div 中使用了 top: -50vh。

   <div className={`${styles.personWrapper} hidden-xs hidden-sm`}>
      <div className={styles.personPositioning}>
        <img src={person} className={styles.person} alt="person" />
      </div>
   </div>
   <div className={styles.anotherDiv}>
    content
   </div>

---

.personWrapper {
  width: 100vw;
  height: 100vh;
  z-index: 91;
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
}

.personPositioning {
  overflow:hidden;
}

.person {
 width: 43.4%;
 display: block;
 position: absolute;
 z-index: 60;
 opacity: 0;
 animation: fadein 0.1s 2.4s;
 animation-fill-mode: forwards;
 bottom: 0;
 left: 25%;
}

.anotherDiv {
   top: -50vh;
}