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

我正在使用以下代码在浏览器窗口的顶部和底部动态创建一个“覆盖”

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

$（函数（）{
var winWidth=$（window.width（）；
var winHeight=$（window.height（）；
$（'body'）。追加（'TOP'）；
$（'body'）。追加（'BTM'）；
}

顶部的

正好显示在我想要的位置

但是底部的

是不可见的。当在Google Chrome中检查它时，它似乎表明它在窗口底部下方

有人能看到我错过了什么吗

---

编辑我的原始代码可以在

中找到，您的CSS中缺少了：

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

否则，请使用“BTM”：）元素的

底部位置，而不是
顶部位置

编辑
$（window.height（）
在脱机状态下可以很好地工作，所以我认为您正在处理jsBin错误

您的CSS中缺少：

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

否则，请使用“BTM”：）元素的
底部位置，而不是
顶部位置

编辑
$（window.height（）
在脱机状态下可以很好地工作，所以我认为您正在处理jsBin错误

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

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

$（'body'）。追加（'BOTTOM'）；

底部属性将元素定位在屏幕底部xx px处
 有一个底部样式属性可用于：

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

$（'body'）。追加（'BOTTOM'）；

底部属性将元素定位在屏幕底部xx px处
 试试下面的方法：

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

$（函数（）{
var winWidth=$（window.width（）；
var winHeight=$（window.height（）；
$（'body'）。追加（'TOP'）；
$（'body'）。追加（'BTM'）；
}
尝试以下操作：

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

$（函数（）{
var winWidth=$（window.width（）；
var winHeight=$（window.height（）；
$（'body'）。追加（'TOP'）；
$（'body'）。追加（'BTM'）；
}
也许我有误解，但你的代码似乎对我有用（以下是答案）

var winWidth=$（窗口）.width（）；
var winHeight=$（window.height（）；
$（'body'）。追加（'TOP'）；
$（'body'）。追加（'BTM'）；
也许我有误解，但你的代码似乎对我有用（以下是答案）

var winWidth=$（窗口）.width（）；
var winHeight=$（window.height（）；
$（'body'）。追加（'TOP'）；
$（'body'）。追加（'BTM'）；
将
top
属性替换为
bottom:0
。你的代码在JSFIDLE中为我工作……在Google Chrome中不为我工作。我想看看你的JSFIDLE，但你没有包含链接。给你：将
top
属性替换为
bottom:0
。你的代码在JSFIDLE中为我工作……在Google Chrome中为我工作Google Chrome。我想看看你的JSFIDLE，但你没有包含链接。给你：Do'h！这太简单了！Do'h！这太简单了！看起来
底部
属性是我需要的。虽然我仍然不知道我的为什么不起作用。这对设置身体高度有什么帮助？我不想这样做使用任何现有标记或样式进行标记。@JonathanWood不，如果要使用bottom属性，则不需要
体高（
）：）我不知道你在干什么。
bottom
是你的必经之路！是的，我明白。但这可能解释了我的原始代码不起作用的原因。就目前而言，我不知道它会起什么作用。@JonathanWood它不起作用，因为它的位置有点超过了（！）顶部元素，因为身体没有高度！。通过添加
身体{height:
jquery会理解窗口的高度。（我不确定这只是jsBin中的问题，请尝试脱机），但是
bottom
会将元素推到绝对底部，直到到达页面底部。OVER（！）顶部元素？对不起，但是你能再详细一点吗？我的原始代码是at，看起来像是我需要的
bottom
属性。虽然我仍然不知道为什么我的属性不起作用。这与设置主体高度有关吗？这有什么帮助？我不想弄乱任何现有的标记或样式。@JonathanWood不，如果要使用bottom属性，则不需要
身体高度（
）我不知道你在干什么。
bottom
是你的必经之路！是的，我明白。但这可能解释了我的原始代码不起作用的原因。就目前而言，我不知道它会起什么作用。@JonathanWood它不起作用，因为它的位置有点超过了（！）顶部元素，因为身体没有高度！。通过添加
身体{height:
jquery会理解窗口的高度。（我不确定这只是jsBin中的一个问题，请尝试脱机），但是
bottom
会将您的元素推到绝对底部，直到到达页面底部。超过（！）顶部元素？对不起，您能再详细说明一下吗？我的原始代码位于