Javascript 防止绝对定位动态div溢出

我需要获得循环中动态生成的div的高度和宽度

细节 我正在动态地设置一个定位绝对div的左上角值。这个div是一个循环，因此它的宽度、高度和位置以n的间隔变化。 （它基本上是一个div，每n秒出现在页面上的任意位置。）

我面临的挑战是，这个div需要始终位于父级中，在本例中是标记。我已将其设置为

位置：相对

甚至

溢出：隐藏

，尽管它没有帮助

这把小提琴使事情变得容易些。 ,

您将看到，由于x和y值是随机生成的，因此div溢出

我发现为了保持div在体内，必须检索其高度和宽度，并与父对象一起计算，以获得大小的差异。 所以我可以像css一样使用它

var heightdiff=parentHeight-divHeight

var-widthdiff=parentWidth-divWidth

在css中通过jQuery

top:Math.floor（（Math.random（）*heightdiff）+0；

left:Math.floor（（Math.random（）*widthdiff）+0；

也许我犯了一个简单的错误，但我已经尝试了所有我能想到的方法。为了重述我需要做的就是得到div的高度和宽度。
我修改了你的脚本：


为什么使用文档作为基础

var docw = $(document).width();
var doch = $(document).height();

使用主体

var docw = $('body').width();
var doch = $('body').height();

或者更好的方法是div的父级（要求您在以下操作之前将div附加到容器）：

这里的问题是div没有内容，因此在计算它的时候没有宽度和高度。所以我在开始时创建了它（注意我在html部分添加了
标记：我不知道fiddlejs如何处理这种情况）：

并且，在末尾，仅放置div的位置：

$newdiv.css({
    'left':posx+'px',
    'top':posy+'px'
}).fadeIn(2000).fadeOut(2000, function(){

也许有了这个解决方案，第一个div将在循环开始之前显示。解决方案是使用
可见性：hidden
属性来隐藏div，但始终能够获得其宽度和高度。
我修改了您的脚本：


为什么使用文档作为基础

var docw = $(document).width();
var doch = $(document).height();

使用主体

var docw = $('body').width();
var doch = $('body').height();

或者更好的方法是div的父级（要求您在以下操作之前将div附加到容器）：

这里的问题是div没有内容，因此在计算它的时候没有宽度和高度。所以我在开始时创建了它（注意我在html部分添加了
标记：我不知道fiddlejs如何处理这种情况）：

并且，在末尾，仅放置div的位置：

$newdiv.css({
    'left':posx+'px',
    'top':posy+'px'
}).fadeIn(2000).fadeOut(2000, function(){

也许有了这个解决方案，第一个div将在循环开始之前显示。解决方案是使用
可见性：hidden
属性来隐藏div，但始终能够得到它的宽度和高度。
为了更清楚地了解您的要求，您需要在JS中创建的div元素的高度/宽度，然后再将其添加到DOM中。The循环与此无关。你是对的。但是，如果我在每个循环上放置不同长度的内容，则div中内容的深度可能会影响其大小。没有关系，直到内容添加到DOM中，jQuery
.height（）
和
.width（）
方法将返回0。这将显示在两个小提琴中。另一个选项是根据HTML内容（即文本字符数）估计大小非常感谢。我将进行一点实验。为了更清楚地了解您的要求，您需要在将div元素添加到DOM之前获得您在JS中创建的div元素的高度/宽度。循环与此无关。您是对的。但是，如果我在每个l上放置不同长度的内容，div中内容的深度可能会影响其大小oop.没关系，在将内容添加到DOM之前，jQuery
.height（）
和
.width（）
方法将返回0。这将显示在两个小提琴中。另一个选项是根据HTML内容（即文本字符数）估计大小非常感谢。我将进行一点实验。使用
display=none
似乎适用于此解决方案，并且元素在淡入之前不会显示。@OliverH很棒的建议。我正在测试它们。@您的链接中似乎仍然存在溢出。使用
display=none
似乎适用于此解决方案，并且元素nt在淡入之前不会显示。@OliverH很好的建议。我正在测试它们。@Nunners在您的链接中似乎仍然溢出。