Chiều cao của div cha mẹ bằng 0 ngay cả khi nó có con với chiều cao hữu hạn

Question

Tôi có trang web có bố cục được hiển thị trong biểu đồ. Phần thân bao gồm main container, bao gồm header, parent div và footer. Các parent div tiếp tục chứa một số child div như được hiển thị.

Vấn đề là chiều cao của tất cả các child div là hữu hạn. Tuy nhiên, parent div không chứa gì khác ngoài các div con. Tất cả các div con được hiển thị nhưng chiều cao của div cha được hiển thị bằng không. Tôi cũng không sửa chiều cao của div cha bằng cách đưa ra một số giá trị được chỉ định trước vì nó có thể gây ra sai lầm nếu số lượng trẻ tăng trong tương lai.

Vấn đề do không có kích thước của div mẹ là div chân trang của tôi đang tăng lên và xung đột với nội dung của div mẹ. Điều này có thể được giải quyết bằng cách đưa ra một margin-top phù hợp, nhưng đó không phải là một giải pháp tôi đang tìm kiếm.

Bất kỳ ai cũng có thể gợi ý cho tôi một số cách để chiều cao của div cha tự động thay đổi theo chiều cao của div con hiện diện.

Vui lòng nhận xét nếu tôi không rõ ràng trong việc hỏi nghi ngờ của tôi!

Answer 1

Dường như bạn có trường hợp cho số clearfix class.

Vì vậy, tôi đoán bạn đang thả div con và đó là lý do chiều cao của div mẹ là 0. Khi bạn sử dụng phao, phụ huynh không thích ứng với chiều cao của trẻ em.

Nhưng thêm lớp 'clearfix' (tất nhiên bạn cần có nó trong bảng định kiểu của bạn) nó sẽ thêm một '.' ở cuối (vô hình tất nhiên) và cha mẹ của bạn kỳ diệu sẽ có chiều cao chính xác.

Lưu ý, đó là nền tảng chéo, tương thích IE6 +, Chrome, Safari, Firefox, bạn đặt tên cho nó!

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 

Answer 2

Hãy thử thêm dòng sau vào stylesheet của bạn:

#parentdiv:after { 
    content: " "; 
    display: block; 
    clear: both; 
} 

Như Daedalus đề xuất trong comment của mình, có lẽ bạn đang nổi các div con. Nếu vậy, dòng trên sửa lỗi.

Sự cố khi bạn làm nổi mọi thứ là phần tử gốc của chúng "bỏ qua" chúng.

Dòng trên tạo và chèn phần tử (giả) vào #parentdiv được đẩy xuống qua tất cả các div được thả nổi. Sau đó, div cha, mặc dù bỏ qua các trẻ đang lưu hành, không bỏ qua phần tử giả này - hành động như nó nên, nó mở rộng để chứa phần tử giả. Bây giờ, vì phần tử giả nằm bên dưới tất cả các phần tử được thả nổi, div cha sẽ xảy ra, hoặc tốt hơn, dường như "chứa" các phần tử được thả nổi - đó thực sự là những gì bạn muốn.