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

Answer 2

你刚刚缺少CSS：

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

否则请使用“BTM”:)元素的bottom位置，而不是top。

修改 $(window).height()离线工作效果很好，所以我只是认为你搞乱了那个jsBin bug

<强> jsbin DEMO

Answer 3

您可以使用底部样式属性：

$('body').append('<div style="position:fixed;left:0px;bottom:30px;width:' + winWidth + 'px;height:30px">BOTTOM</div>');

底部属性将元素定位在屏幕底部的xx px处。

Answer 4

尝试以下：

$(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;bottom:0px;width:' + winWidth + 'px;height:30px">BTM</div>');
}

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

4 个答案: