set layer or table to the very bottom of window

This site is best viewed in a modern browser with JavaScript enabled.

set layer or table to the very bottom of window

cybercampbell

Hi all

I am wanting to set a layer or table to the very bottom of the window so no mater the size of the window it is always at the bottom. Like as if I was using a frame but I don't want to use frames.

Any ideas? I've looked on goole but can't seem to find what I need, maybe i'm searching the wrong keywords.

Cheers
Chris

Mr_J

You need to get the height of the window using

document.body.clientHeight

Then you need the height of the layer, or table.

Then use

document.getElementById("ID").style.top = document.body.clientHeight - document.getElementById("ID").offsetHeight

to set its position

<div id="div1" style="position:absolute;left:0;top:0;width:300px;height:100px;border:1px solid blue">hi there</div>

// -->
</script>

cybercampbell

Thanks for that.

For some reason it didn't work....but.....it did lead to me finding this very cross compatable solution:

function setfooter() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement &&
      ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  div_height= document.getElementById("footer").offsetHeight
  document.getElementById("footer").style.top = myHeight - div_height

}

<body onLoad="setfooter()" onResize="setfooter()">

<div id="footer" style="position:absolute; left:0; top:352px; width:100%; height: 32px; border:0; color: #FFFFFF;">
Footer
</div>

Thanks for your help

Chris

PeOfEo

You are doing it the hard way. You could just use css to position it completely. I do not see why you need the scripts.

edit: Oh, wait, nevermind, I see you want it to stay there even when it scrolls. But if you just want something to always be at the window bottom no matter the size, css can still do that without the aid of a script.

Mr_J

Strange that it did not work for you, I'd tested it in IE6, Mozilla, and Firefox without any problems