Wysokość elementu nadrzędnego div wynosi zero, nawet jeśli ma dziecko o skończonych wysokościach

Question

Mam stronę internetową, której układ został przedstawiony na schemacie. Ciało składa się z main container, który składa się z header, parent div i footer. Model parent div zawiera ponadto kilka następujących po sobie child div.

Problemem jest wysokość wszystkich child div jest skończona. Ale parent div zawiera nic innego niż div dzieci. Wszystkie elementy div są widoczne, ale wysokość elementu div rodzica jest równa zero. Nie ustalam również wysokości div jednostki nadrzędnej, podając pewną z góry określoną wartość, ponieważ może ona spowodować błąd, jeśli liczba dzieci wzrośnie w przyszłości.

Problem związany z zerowym rozmiarem elementu div rodzicielskiego polega na tym, że podziałka stopki rośnie i ściera się z zawartością elementu nadrzędnego. Można to rozwiązać przez podanie odpowiedniego marginesu, ale nie jest to rozwiązanie, którego szukam.

Czy ktoś może zaproponować mi sposób, aby wysokość div jednostki nadrzędnej automatycznie zmienia się zgodnie z wysokości div obecnych dzieci.

Proszę o komentarz, jeśli jestem niejasny w zadawaniu moich wątpliwości!

Answer 1

Wygląda na to, że masz skrzynkę na clearfix class.

Zgaduję, że pływasz w dziale dziecięcym, dlatego wysokość div dziecka wynosi 0. Kiedy używasz spławików, rodzic nie dostosowuje się do wzrostu dzieci.

Ale dodanie klasy "clearfix" (oczywiście musisz mieć ją w swoim arkuszu stylów) doda "." na końcu (oczywiście niewidzialne), a twój rodzic będzie miał magiczną wysokość.

Uwaga, jest to platforma, kompatybilna z IE6 +, Chrome, Safari, Firefox, co ty na to!

.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

spróbuj dodać następujące wpisy do arkusza stylów:

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

Jak Dedal zasugerował w swoim komentarzu, jesteś prawdopodobnie pływających DIV potomnych. Jeśli tak, powyższa linia to naprawia.

Problem polegający na tym, że element pływający "ignoruje" je.

Powyższa linia tworzy i wstawia (pseudo) element do #parentdiv, który jest przesuwany poza wszystkie pływające elementy div. Wtedy rodzic div, który chociaż ignoruje unoszone elementy potomne, nie ignoruje tego pseudoelementu - zachowując się tak, jak powinien, rozszerza się, by zawierał pseudoelement. Teraz, ponieważ pseudoelement znajduje się poniżej wszystkich unoszonych dzieci, rodzicielski div dzieje się, lub jeszcze lepiej, wydaje się "zawierać" także unoszone dzieci - co jest naprawdę tym, czego chcesz.