Set bottom to 100% of own height

Issue

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.

Solution

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

Answered By – Pepe

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published