如何设置元素为自身高度的-100%以隐藏到页面视图外？

要实现适配任意高度的元素，你不能依赖bottom属性（它的百分比是相对于父元素高度的），可以用以下几种可靠的方法：

方法1：使用 transform: translateY(100%) #

这是最简洁且适配性最好的方案，因为translateY()的百分比值是基于元素自身高度计算的：

.your-element {
  position: fixed; /* 若需相对于父容器定位，改用 absolute，同时父容器设 position: relative */
  bottom: 0; /* 先让元素底部贴合页面/容器底部 */
  transform: translateY(100%); /* 向下移动自身高度的100%，此时元素顶部刚好触碰底部边缘，整体完全隐藏 */
}

原理：先让元素底部与页面底部对齐，再通过translateY(100%)将元素向下偏移自身高度的距离，刚好让整个元素移出可视区域，且顶部边缘刚好接触页面底部。

方法2：结合 CSS Grid 布局（适用于父容器占满视口的场景） #

如果元素的父容器是全屏视口容器，可以借助Grid的对齐属性配合transform：

.page-wrapper {
  height: 100vh;
  display: grid;
}

.your-element {
  align-self: end; /* 元素对齐容器底部 */
  transform: translateY(100%); /* 偏移自身高度完成隐藏 */
}

方法3：动态设置 CSS 变量（需配合JS） #

如果你需要用bottom属性实现，可以通过JS动态获取元素高度并赋值给CSS变量：

.your-element {
  --elem-height: 0px;
  position: fixed;
  bottom: calc(-1 * var(--elem-height));
}

const elem = document.querySelector('.your-element');
elem.style.setProperty('--elem-height', `${elem.offsetHeight}px`);

这种方法需要额外的JS逻辑，不如transform方案灵活，适合必须使用bottom属性的特殊场景。

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