容器高度上的 CSS "breakpoints"

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/