将底部设置为自身高度的100%

Question

我想设置一个元素，使其从页面视图中隐藏，并且其顶部恰好接触页面底部（该元素在视线之外）。当元素的高度恒定为 66px 时，我首先执行 botttom: -66px;' 。但现在我需要这个来处理任何大小的元素。

如果我执行 bottom: -100%; ，它会将其设置为父级大小的 100%。如何将其设置为自身高度的-100%。

Answer 1

您正在寻找“position:fixed”和“transform:translateY(100%);”。这允许您将 div 移出视口 100%，与 div 的高度无关。

示例：

div {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
  background-color: red;
  color: #fff;
  transform: translateY(100%);
}