How to set css position 'top' relative to document height instead of viewport height?

Question

I will try to make my question more clear.

Because I used below setting on Html body, I need to scroll the page down to get to page bottom.

body {  height: 180vh;}

And I want to set a div position top property relative to document height, so that I can control its position at a place only visible when I scroll down. I prefer to set it by percentage value so that code will adapt different sizes of devices.

But by default the top property is relative to viewport, so I can not realize it by setting top value.

Is there a way to realize what I want to do? even not by top property.

You can do it by bottom: 0; if it helps you – Sonia Sep 10 '19 at 07:11 — Sonia, Sep 10 '19 at 07:11

score 3 · Accepted Answer · answered Sep 10 '19 at 07:11

If you give the body a position: relative and the div a position: absolute, you can set the top property as a percentage, where top: 100% will position it at the bottom of the page:

body {  
  height: 180vh;
  background: lightblue;
  position: relative;
}

div{
   height: 30px;
   width: 140px;
   border: solid 2px gray;
   background: white;
   position: absolute;
   top: 100%;
}

<div></div>

score 2 · Answer 2 · answered Sep 10 '19 at 07:16

If i understand your question correctly, there are 2 ways

use padding-top
use position:absolute and top

code snippet below:

body {
  height: 180vh;
}

.myDiv1 {
  margin-top: 110vh;
  height: 100px;
  width: 100%;
  background: lightblue;
}

.myDiv2 {
  position: absolute;
  top: 150vh;
  height: 100px;
  width: 98%;
  background: lightpink;
}

<body>
  <div class='myDiv1'></div>
  <div class='myDiv2'></div>
</body>

score 1 · Answer 3 · answered Sep 10 '19 at 07:13

First you need to make sure that the position property of the body is relative, absolute or fixed.
You can then set the position: absolute to make the element be dependent on the last parent element that had one of three properties mentioned above.
Finally you can set your top, left, right and bottom properties after that.

body {
  height: 180vh;
  position: relative;
}

#down {
  position: absolute;
  // or bottom: 10%;
  bottom: 25px;
}

  <div id="down">Here</div>

How to set css position 'top' relative to document height instead of viewport height?

3 Answers3