关于容器高度的CSS"断点"

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/