设置最大高度而不是溢出

Question

一些背景：我有一个div，其中将添加不同高度的元素，并且我需要实现以下内容：

div有一个max-height属性，当添加到Div的不同元素重叠这样的高度时，我不能让div＆＃34;溢出（在它上面放一个滚动条）＆＃34 ;。相反，我需要检测何时发生这种情况，因此我可以创建另一个div，我可以在其中放置其余的元素。随附的图片是我希望说明我想要做的事情。

Answer 1

使用jQuery：

var maxHeight = $(".someElement").css("max-height");
var height = 0;
$(".elements").each(function(){
    height += $(this).height();
    if(height >= maxHeight){
        //create new div here and put the rest of the elements there

        height = 0; //so you can continue with the loop and creating more divs.
    }
});

Answer 2

我有一个伪功能，我认为可以让你开始正确的轨道。您必须填写适当的信息。

$(elements).each(function() {
    var currentDiv = $(currentDiv);
    if($(currentDiv ).height() > MAX_HEIGHT)
    {
       $(currentDiv).insertAfter(newDiv);
       currentDiv = $(newDiv);
    }
    $(currentDiv).append(element);
});

您必须跟踪要添加信息的当前div。只需添加正常的信息，但当它溢出时，你应该插入一个新的div并将当前的div变量更改为该变量，然后再继续追加。

Answer 3

要测试div当前是否溢出，请将它的scrollHeight与其高度进行比较。

使用jQuery

if ($(obj)[0].scrollHeight > $(obj).height()) {
    // do stuff
}

在这种情况下，您可能希望在添加内容之前测试css max-height。为此（在jQuery中再次）将您计划添加的内容加载到变量中，以便在将其添加到文档之前检查其高度。

var content = // your content here
if ($(container).height() + content.height() > parseInt($(container).css("max-height"), 10)) {
    // this means it would overflow, so do stuff
} else {
    // no overflow here
    $(container).append(content);
}

这是一个快速的小提琴。 http://jsfiddle.net/k0g47xdr/2/

编辑：

.css（“max-height”）周围的parseInt调用是从它所引入的文本格式转换为常规数字。如上所述，它假设值是以px为单位，而不是em或百分比。