jquery - 添加 div 但让它们留在视口(viewport)内

Question

好的，所以我正在尝试将一定数量的 div 附加到主体而不更改主体的宽度或高度。换句话说，新的 div 必须留在视口(viewport)内，这是我的代码:

divAmount = 6;
$(document).ready(function(){
windowWidth = $(window).width();
windowHeight = $(window).height();


game();


$('body').css({
    "max-width" : windowWidth,
    "max-height" : windowHeight 
    });

});

function game(){ 


for (var i = 0; i < divAmount; i++) {
        $("<div class='box' />").appendTo("body").css({
            "margin-left" : Math.floor(Math.random() * windowWidth - 100) + 1,
            "margin-top" : Math.floor(Math.random() * windowHeight - 100) + 1
        });
}

$('.box').click(function(){
    $(this).removeClass('box').addClass("exploding");
}); 




};  

这样做是为了正确添加 div；但是，它们不会停留在视口(viewport)内

Answer 1

这是我制作的工作 fiddle - http://jsfiddle.net/Kn3V3/

如果您给 .box div 绝对定位，它们有点不会占用任何空间。

.box {
    background: red;
    height: 10px;
    width: 10px;
    position: absolute;
}

但是，正如上面有人所说，你应该让一个容器div成为窗口的高度和宽度而不是body，然后body 100% h/w。 (这就是我在 fiddle 中所做的)