Thiết kế đáp ứng: Tại sao chiều cao không & padding-bottom làm việc để thực hiện một div có kích thước có trách nhiệm?

Question

Sau khi xem qua mã Zurb Foundation, tôi nhận thấy họ đang sử dụng một cách tiếp cận CSS như thế này để cho phép một div vuông đáp ứng:

.div{ 
    position:relative; 
    width:33%; 
    height:0; 
    padding-bottom:33%; 
} 
.divInner{ 
    position:absolute; 
    width:100%; 
    height:100%; 
} 

Tôi đã sử dụng phương pháp này trên một số dự án mới (vẫn còn trong dev tư nhân) , nhưng không biết hỗ trợ trình duyệt cho nó hoặc tại sao chiều cao thậm chí có thể bắt chước kích thước chiều rộng. Có ai biết tại sao điều này xảy ra không? Cảm ơn!

Answer 1

Phần tử thứ hai được định vị hoàn toàn tương ứng với vùng chứa. Đó là vị trí tương đối.

Trong CSS, phần trăm dựa trên phần đệm có liên quan đến chiều rộng của phần tử. Đó là những gì tạo ra hiệu ứng hình vuông.

Và cũng là lý do tại sao nếu bạn thêm cùng một kích thước đệm cho tất cả các bên, tất cả các bên có cùng tỷ lệ phần trăm đệm. Nó liên quan đến một phép đo (chiều rộng) và KHÔNG cả chiều rộng và chiều cao. điều đó sẽ khiến cho phần đệm bị lệch nếu phần tử không vuông.