CSS "điểm ngắt" trên chiều cao của các thùng chứa

Question

Có cách nào thanh lịch để đặt các điểm ngắt, các loại, trên chiều cao của các thùng chứa hay không.

Ví dụ:

Giả sử bạn có một div và min-height được đặt ở nói 100px. Ngay sau khi nội dung nhận được quá nhiều nó không chỉ phát triển, nhưng tăng thêm 100px và khi nội dung cuối cùng được đưa xuống dưới cùng của 200px, mở rộng chiều cao thêm 100px nữa.

Có ai làm điều gì như thế này trước đây không?

Answer 1

Tôi không nghĩ rằng đây có thể chỉ sử dụng CSS, nhưng bạn có thể sử dụng 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

tôi tìm thấy câu hỏi của bạn rất thú vị vì vậy tôi đã lấy số tăng bit theo nghĩa đen và tạo ra một fiddle nơi thay đổi nội dung được xử lý và div chứa có tăng hoặc chiều rộng hoặc chiều cao bằng một ngưỡng xác định.

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

Ý tưởng chính là bạn sẽ chỉ phải nghe những thay đổi DOM và sau đó chạy một hàm jQuery như vậy:

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

Nếu bạn tìm thấy nó hữu ích, hãy tiếp tục và sử dụng nó và sửa đổi như bạn muốn.

Tín dụng cho các sự kiện DOM: How to alert ,when div content changes using jquery

Answer 3

Bạn có thể sử dụng chiều cao phong cách container: tự động! Quan trọng; và chiều cao tối thiểu: 100px; chiều rộng: 100%;