CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
Horace
Horace

Reputation: 1208

Place element at bottom of the visible part of the document element

I would like to place a popup at the bottom of the visible part of an Html document, even if I scroll down?

The html document does not fit in the window so I have to scroll down to view it all. And each time I scroll, the visible part is varies. So how can I get the coordinates of the bottom of the currently visible part?

Any help will be appreciated.

Regards,

Horace

Upvotes: 0

Views: 336

Answers (2)

Guffa
Guffa

Reputation: 700720

You can use the CSS style position: fixed; to position the element relative to the view port (window area).

Example:

<div style="position:fixed;left:100px;bottom:0;width:100px;height:50p;">
  Bottom
</div>

Note: Some really old browsers (e.g. Internet Explorer 6) doesn't support position: fixed. If you need to support those, you would need to use Javascript to get the size of the window, and use position: absolute to place the element, and catch the scroll event so that you can move the element to keep it visible.

Upvotes: 1

bfavaretto
bfavaretto

Reputation: 71939

Did you try position: fixed on your CSS? It's supposed to position elements relative to the viewport as you want. Something like this:

#myelement {
    position: fixed;
    bottom: 0;
}

Upvotes: 1

Related Questions