To get the height of the document on the screen, you need the clientHeight property of the document's body.
It is also worth bearing in mind that you need to position it when the user scrolls the window. For this, you can use the scrollTop property of the body, which returns how far down the page the window has been scrolled at the top-left corner.
So to position the DIV at the bottom of the window, you need to add the scrolled height to the window height, and then take away the height of your DIV. you need to do this at 3 points: when the window is resized, when they scroll the window, and when the window first loads. Something like below should work (offsetHeight is like clientHeight but includes height of scrollbars if necessary):
<body onload="movediv()" onscroll="movediv()" onresize="movediv()">
<script>
function movediv()
{
myDiv.style.pixelTop = document.body.clientHeight + document.body.scrollTop - myDiv.offsetHeight;
}
</script>
<div id="myDiv"
style="
position:absolute;
top:0px;
left:5px;
width:100px;
height:100px;
background:red; border:1px blue solid;"
>
MyDIV
</div>
</body>
Regards
Philip
-------------------------
[email protected]
Window Size and DIV location
