Stellen Sie den Boden auf 100 % seiner eigenen Höhe ein

Question

Ich möchte ein Element so einrichten, dass es in der Seitenansicht verborgen ist und seine Oberseite gerade den unteren Rand der Seite berührt (das Element ist außer Sichtweite). Ich mache zuerst botttom: -66px;', wenn die Höhe des Elements konstant 66 Pixel beträgt. Aber jetzt brauche ich das, um Elemente jeder Größe zu verarbeiten.

Wenn ich das tue bottom: -100%;, wird es auf 100 % der Größe des Elternteils gesetzt. Wie kann ich es auf -100 % seiner eigenen Höhe einstellen?

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%);
}