0

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.

1
  • You can try with a wrapper div.
    – Akib
    Nov 24, 2022 at 6:36

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.