根据vh将垂直项目对齐到所有分辨率

Question

我有一些元素用作图层（所有元素都是绝对定位的并且带有z-index）。

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

我已经尝试了底部定位，垂直对齐和翻译，并且解决方案有时可以工作，但仅限于我的原生分辨率，当我开始测试时，他们搞砸了！ （即使我使用％定位）。

这是我的最后一次拍摄：

    <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我使用了top：-50vh在下一个div中。

if [ "${var_bool}" -eq 0 ]; then YourCodeIfTrue; else YourCodeIfFalse; fi

   <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>