集裝箱高度的CSS「斷點」

Question

有沒有一種優雅的方法來設置集裝箱高度的斷點。

例子：

假設你有一個div和最小高度設置爲100像素的發言權。只要內容太多，它不僅會增長，而且還會增長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

我發現你的問題很有意思，所以我拿增長位逐字地創建了一個小提琴，其中處理內容更改並且包含的​​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

您可以使用容器的風格高度：汽車！重要;和最小高度：100px;寬度：100％;