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

我使用以下代码在浏览器窗口的顶部和底部动态创建“覆盖”<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

来源

2013-01-11 Jonathan Wood

用'bottom：0'替换'top'属性。 – undefined

您的代码在jsfiddle中为我工作... – sgeddes

在Google Chrome中不适用于我。我会看看你的jsFiddle，但你没有包含链接。 –

发现你只是在你的CSS缺失：

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

与“BTM”的bottom位置，否则玩:)元素代替当然是top。

编辑 $(window).height()将工作的伟大下线，所以我只是觉得你与jsBin错误

jsbin DEMO

来源

2013-01-11 03:10:29

看起来像'底部'属性是我所需要的。虽然我仍然不知道为什么我的工作没有成功。这是关于设置身体的高度是什么？这将如何帮助？我宁愿不要混淆任何现有的标记或样式。 –

@JonathanWood不，你不需要'身高'，如果你要使用底部属性！ :)我不确定你在做什么。 '底部'是你绝对走的路！ –

是的，我明白了。但它可能会解释为什么我的原始代码不起作用。就目前而言，我不知道它会如何。 –

还有就是你可以使用这个底部样式属性搞乱：

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

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

来源

2013-01-11 03:11:01

尝试如下：

$(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-11 03:11:23

Do'h！这太简单了！ –

也许我误解，但你的代码似乎是为我工作（这里是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-11 03:18:44 sgeddes

我的代码可以在http://jsbin.com/uravif/41 –

看到+1看起来你是对的，这是一个jsBin的bug。 –

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

回答

相关问题