Set the bottom to 100% of its own height

Question

I want to set up an element so that it is hidden from the page view and its top just touches the bottom of the page (the element is out of view). When the height of the element is constant 66px, I first do botttom: -66px;' . But now I need this to handle elements of any size.

If I do bottom: -100%; it sets it to 100% of the parent's size. How can I set it to -100% of its own height.

Answer 1

You are looking for "position:fixed" and "transform:translateY(100%);". This allows you to move the div 100% out of the viewport, regardless of the div's height.

Example:

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