CSS "Breakpoints" auf Höhe von Containern

Question

Gibt es eine elegante Möglichkeit, Breakpoints auf Höhe von Containern zu setzen.

Beispiel:

Angenommen, Sie haben ein div und eine min-height bei etwa 100px eingestellt ist. Sobald der Inhalt zu viel wird, wächst er nicht nur, sondern wächst um weitere 100px und wenn der Inhalt schließlich auf den Boden der 200px kommt, wird die Höhe um weitere 100px erweitert.

Hat jemand so etwas schon einmal gemacht?

Answer 1

Ich glaube nicht, das ist nur möglich, mit Hilfe von CSS, aber Sie können Javascript verwenden:

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

I fand Ihre Frage sehr interessant, so nahm ich die wachsen Bit wörtlich und erstellt eine Geige, wo Inhalte geändert wird behandelt und das Containing div wird entweder in Breite oder Höhe um einen definierten Schwellenwert erhöht.

Fiddle:http://jsfiddle.net/Tvswj/1/

Die Hauptidee ist, dass Sie nur für DOM Änderungen hören und dann eine jQuery-Funktion als solche ausgeführt:

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

Wenn Sie es nützlich finden, bitte gehen Sie voran und verwenden Sie es und ändern Sie, wie Sie wollen.

Credits für Veranstaltungen DOM: How to alert ,when div content changes using jquery

Answer 3

Sie können Container Stil Höhe verwenden: auto! Wichtig; und min-Höhe: 100px; Breite: 100%;