javascript - 在浏览器窗口的顶部和底部动态创建元素

Question

我正在使用以下代码动态创建“叠加层”<div>在浏览器窗口的顶部和底部。

$(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>');
}

置顶<div>出现在我想要的位置。

但底部<div>不可见。在 Google Chrome 中检查时，似乎表明它位于窗口底部下方。

谁能看到我在这里错过了什么？

编辑 我的原始代码可以在 http://jsbin.com/uravif/41 找到

Answer 1

也许我误解了，但你的代码似乎对我有用(这里是 Fiddle )。

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>');