0

好的，所以我试图在不改变身体宽度或高度的情况下将一定数量的 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；但是，它们不会停留在视口内

4

2 回答 2

0

你应该使用这个：

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

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

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

您可以将screen.widthand用于 和的screen.height值。min-width min-heightmax-width max-height

留在视口内？

您也可以尝试向overflowbody 标记添加属性以删除滚动条，但我认为这不是您想要的！

然后只需使用minand max。

于 2013-10-07T15:48:17.397 回答
0

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

如果你给 .box divs 绝对定位，它们就不会占用任何空间。

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

但是，正如上面有人所说，您应该将容器 div 设置为窗口的高度和宽度而不是 body，然后将 body 设置为 100% h/w。（这就是我在小提琴中所做的）

于 2013-10-07T16:21:42.410 回答