CSS "punkty przerwania" na wysokości kontenerów

Question

Czy istnieje elegancki sposób ustalania pułapów, rodzajów, na wysokości kontenerów.

Przykład:

że masz div i min-height jest ustawiony na powiedzmy 100px. Jak tylko zawartość staje się zbyt duża, nie tylko rośnie, ale rośnie o kolejne 100 pikseli, a kiedy zawartość trafia w końcu na dno 200px, zwiększa wysokość o kolejne 100 pikseli.

Czy ktoś jeszcze coś takiego robi?

Answer 1

Nie sądzę, jest to możliwe tylko za pomocą CSS, ale można użyć 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

I Twoje pytanie było bardzo interesujące, więc wziąłem hodować bit dosłownie i utworzono skrzypce, w którym przetwarzane są zmiany zawartości, a zawierający je element div jest zwiększany w szerokości lub wysokości o zdefiniowany próg.

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

Główną ideą jest to, że będziesz miał tylko słuchać zmian DOM, a następnie uruchomić funkcję jQuery jako takie:

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

Jeśli okaże się to przydatne, proszę śmiało go używać i modyfikować, jak chcesz.

Kredyty zdarzeń DOM: How to alert ,when div content changes using jquery

Answer 3

Można stosować wysokość stylu: auto! Ważny; i min-height: 100px; szerokość: 100%;