Set bottom to 100% of own height-CodePudding

I want to set an element so that it hides from page view and it's top touches exactly the bottom of page (the element is out of sight). I was doing botttom: -66px;' at first when the element had constant height of 66px. But now I need this for an element of any size.

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

CodePudding user response：

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

Example:

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