Question

I’m using the following code to dynamically create an “overlay” <div> at the top and bottom of the browser window.

$(function() {
  var winWidth = $(window).width();
  var winHeight = $(window).height();
  $('body').append('<div style="position:fixed;left:0px;top:0px;width:' +
      winWidth + 'px;height:30px">TOP</div>');
  $('body').append('<div style="position:fixed;left:0px;top:' +
      (winHeight - 30) + 'px;width:' + winWidth + 'px;height:30px">BTM</div>');
}

The top <div> appears exactly where I want it to.

But the bottom <div> is not visible. When inspect it in Google Chrome, it seems to indicate that it is below the bottom of the window.

Can anyone see what I’ve missed here?

EDIT My original code can be found at http://jsbin.com/uravif/41

Answer 1

you’re just missing in your CSS:

body{
  height:100%; /* to fix jsBin bug with $(window).height() */
}

otherwise play with the bottom position of your “BTM” 🙂 element instead of top of course.

edit
$(window).height() will work great offline, so I just think you’re messing with that jsBin bug

jsbin DEMO