將底部設定為自身高度的100%

Question

我想設定一個元素，使其從頁面視圖中隱藏，並且其頂部恰好接觸頁面底部（該元素在視線之外）。當元素的高度恆定為 66px 時，我首先執行 botttom: -66px;' 。但現在我需要這個來處理任何大小的元素。

如果我執行 bottom: -100%; ，它會將其設定為父級大小的 100%。如何將其設定為自身高度的-100%。

P粉005105443 · Answer

您正在尋找「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%);
}