Question

好吧所以我试图在不改变身体宽度或高度的情况下向身体追加一定数量的div。换句话说，新的div必须留在视口内，这是我的代码：

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;但是，他们并没有留在视口内

Answer 1

你应该用这个：

min-width: 120px;
max-width: 240px;

这样，您将控制宽度的最小值和最大值。同样，您也可以控制身体标签的高度。

这样，所有将要添加的新div将作为流进入正文。而不是弄乱高度和宽度。

您可以使用screen.width和screen.height来获取min-width min-height以及max-width max-height的值。

留在视口内？

您还可以尝试将overflow属性添加到body标签以删除滚动条，但我不认为这是您想要的！

然后只需使用min和max。

Answer 2

这是我做的一个工作小提琴 - http://jsfiddle.net/Kn3V3/

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

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

然而，正如有人说的那样，你应该制作一个容器div，而不是身体的窗口的高度和宽度，然后是100％h / w的身体。（这就是我在小提琴中所做的事情）

添加div但让它们保持在视口内

2 个答案: