Question

是否有一种优雅的方法来设置容器高度的断点。

示例：

假设您有一个div，并且最小高度设置为100px。一旦内容变得太多，它就不会增长，而是增长另外100px，当内容最终到达200px的底部时，将高度再延长100px。

以前有人做过这样的事吗？

Answer 1

我不认为这只能使用CSS，但你可以使用javascript：

HTML：

<div id='div'>hello</div>

的javascript：

var div = document.getElementById('div');
var height = 0;
div.style.height = height + "px";

while(div.scrollHeight > div.clientHeight){
    height += 50;
    div.style.height = height+"px";
}

http://jsfiddle.net/fa7d0/JkT7R/

Answer 2

我发现你的问题非常有趣，所以我逐字地取了 grow 位并创建了一个小提琴，其中处理了内容更改，并且包含的div在宽度或高度上增加了一个定义的阈值。

小提琴： http://jsfiddle.net/Tvswj/1/

主要思想是你只需要监听DOM更改，然后运行jQuery函数：

// Trigger the resize function on content change
$(myDiv).bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function () {
    $(this).breakpointResize(threshold);
});

如果您觉得它很有用，请继续使用并根据需要进行修改。

DOM活动的积分：How to alert ,when div content changes using jquery

Answer 3

你可以使用容器样式高度：auto！重要;和最小高度：100px;宽度：100％;

关于容器高度的CSS“断点”

3 个答案: