I want a div
to be positioned below the screen, but when you scroll it to appears. I can do this using margin-top
but this requires a specific number whereas I want it to be relative to the screen it is on, so that it appears when you just start to scroll down on all screens.
How can I do this? Thanks.
Best How To :
Use vh
:
iewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document. Only Gecko-based browsers are updating the viewport values dynamically, when the size of the viewport is modified (by modifying the size of the window on a desktop computer or by turning the device on a phone or a tablet).
#myEl {
position: absolute;
top: 100vh;
}
Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/length
Demo: http://jsfiddle.net/tusharj/g8pfow8r/