Responsywny projekt: dlaczego wysokość zero i dopełnienie-dół działają, aby uzyskać rozmiar responsywny?

Question

Po pominie kodu ZURB Fundacji, zauważyłem, że były przy użyciu podejścia CSS tak, aby umożliwić elastyczne kwadratowy Gr:

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

Używam tego podejścia w niektórych nowszych projektów (nadal w prywatnej dev) , ale nie znasz obsługi przeglądarki lub dlaczego wysokość jest nawet w stanie naśladować szerokość. Czy ktoś wie, dlaczego tak się dzieje? Dzięki!

Answer 1

Drugi element jest umieszczony bezwzględnie względem kontenera. Który jest pozycjonowany względnie.

W CSS marginesy oparte na procentach odnoszą się do szerokości elementu. To właśnie tworzy kwadratowy efekt.

I jest również powód, dla którego do wszystkich stron dodawany jest dopełniacz o takim samym rozmiarze, wszystkie strony mają taki sam procent wypełnienia. Jest to stosunek do jednego pomiaru (szerokości), a NIE zarówno do szerokości, jak i wysokości. to powodowałoby przekrzywienie obicia, gdyby element nie był kwadratowy.