1

<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>是不可见的。在谷歌浏览器中检查它时，它似乎表明它位于窗口底部的下方。

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

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

4

4 回答 4

2

也许我误解了，但你的代码似乎对我有用（这里是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>');
于 2013-01-11T03:18:44.733 回答
1

你只是在你的 CSS 中丢失了：

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

否则玩bottom你的“BTM”:) 元素的位置，而不是top当然。

编辑 $(window).height()将在离线时工作得很好，所以我只是认为你在搞乱那个 jsBin 错误

jsbin 演示

于 2013-01-11T03:10:29.107 回答
1

有一个底部样式属性可用于此：

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

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

于 2013-01-11T03:11:01.650 回答
1

试试下面：

$(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>');
}
于 2013-01-11T03:11:23.490 回答