添加 div 但让它们留在视口内答案

【问题标题】：adding divs but making them stay inside the viewport添加 div 但让它们留在视口内
【发布时间】：2013-10-08 00:21:42
【问题描述】：

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

【问题讨论】：

你的问题很模糊，但masonry 可以做你想做的事。
@Liam 如何模糊我添加新的 div，我希望它们留在视口内
@Liam，他不需要砖石，他只想让 div 保持在宽度和高度的限制内，并且不应该在 UI 中产生任何滚动或混乱！跨度>
@Liam 对不起。好的，我正在做的是为我自己的训练技能创建一个游戏。游戏每回合都会添加一个 div .box，关键是在时间用完之前点击它们。现在我正处于游戏的开始阶段，我只是想添加 div 并让它们留在视口内
@liam 正确，每一轮 div 都会翻倍

标签： jquery html css

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

你应该使用这个：

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

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

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

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

留在视口内？

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

然后只需使用min 和max。

【讨论】：

我尝试只使用最大宽度，因为我并不真正关心最小宽度，是否需要同时使用它们才能正常工作？
不，您只需要根据需要设置属性。它们不需要一起使用，您只需使用max-width 而不必使用min。 :) 祝你好运..