Element div kontenera CSS nie uzyskuje wysokości

116

Chcę, aby mój element div kontenera uzyskał maksymalną wysokość swojego elementu podrzędnego. nie wiedząc, jaki wzrost divbędzie miało dziecko . Próbowałem na JSFiddle . Pojemnik divjest na czerwono. który się nie pojawia. Czemu?

css css-float liquid-layout

— Neel Basu
źródło

282

Dodaj następującą właściwość:

.c{
    ...
    overflow: hidden;
}

Zmusi to kontener do przestrzegania wysokości wszystkich znajdujących się w nim elementów, niezależnie od elementów pływających.
http://jsfiddle.net/gtdfY/3/

AKTUALIZACJA

Ostatnio pracowałem nad projektem, który wymagał tej sztuczki, ale musiał umożliwić wyświetlanie przepełnienia, więc zamiast tego możesz użyć pseudoelementu, aby wyczyścić elementy pływające, skutecznie osiągając ten sam efekt, jednocześnie pozwalając na przepełnienie wszystkich elementów.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

— Nightfirecat
źródło

8

Zasadniczo dodanie tej właściwości zmusza zewnętrzne pole do ignorowania reguły, którą mają kontenery pływające, gdzie nie są one obliczane w wysokości dla kontenerów, i stosowania ich do pełnego rysunku w tle.

— Nightfirecat

4

Wow, pomyślałem: „Co? To nie zadziała”. Ale będę cholerny. Całkowicie myślałem, że nie będzie się prawidłowo zachowywać. Dzięki

— fie

1

Czy to naprawdę nie jest dość hakerskie? Dla mnie jest to sprzeczne z celem przepełnienia. Nie rozumiem, dlaczego jest to poprawna i najbardziej przychylna odpowiedź.

— Andrew Weir

3

@AndrewWeir Przyznaję, do tej pory nie byłem do końca pewien, dlaczego ta metoda rozszerzania pojemników w celu prawidłowego uwzględnienia pływaków w ich rozmiarze zadziałała. Według do kilku źródeł , wydaje się, że powoduje to element, aby zmienić swój tryb renderingu, z dopuszczenia do przepełnienia widzialne nie robi tak, a czyniąc tak, to zmusza elementy zabronić że przepełnienie.

— Nightfirecat

2

Pierwszy sposób, używając przepełnienia, działa dla mnie. Drugi sposób również działa i wydaje się mniej ryzykowny w przypadku przepełnienia w przyszłości. Chciałbym tylko dwukrotnie zagłosować za.

— Tyler Collier

28

Unosisz dzieci, co oznacza, że „unoszą się” przed pojemnikiem. Aby uzyskać prawidłową wysokość, należy „wyczyścić” pływak

Styl div = "clear: both" czyści zmienną i podaje prawidłową wysokość kontenera. zobacz http://css.maxdesign.com.au/floatutorial/clear.htm aby uzyskać więcej informacji o pływakach.

na przykład.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>

— Yoeri
źródło

To jasne: oba; wydaje się być właściwym rozwiązaniem dla wysokości kontenera, ponieważ problemem są pływające dzieci. Więc to podejście wydaje się lepsze niż przepełnienie: ukryte; jeden powyżej.

— Ronnie Depp,

Dzięki @Yoeri za udostępnienie tego prostego rozwiązania. Szukam tego samego rozwiązania dla mojego nowego projektu, ponieważ minęło prawie 6 lat, odkąd ostatni raz zaprojektowałem układ strony internetowej, po tym, jak skupiłem się wyłącznie na perspektywie programowania PHP, a nie stronie projektowej.

— Ronnie Depp,

20

Czy to nie jest takie łatwiejsze?

.c {
    overflow: auto;
}

— Antonio Romero Oca
źródło

Tak, to jest: D. Dzięki

— Alauddin Ahmed

4

Spróbuj wstawić ten usuwający element div przed ostatnim </div>

<div style="clear: both; line-height: 0;"> </div>

— zawietrzny
źródło

3

Najlepszym i najbardziej kuloodpornym rozwiązaniem jest dodanie ::beforei ::afterpseudoelementy do kontenera. Więc jeśli masz na przykład listę taką jak:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

A każdy element na liście ma float:leftwłaściwość, to powinieneś dodać do swojego css:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

Lub możesz spróbować display:inline-block;właściwości, wtedy nie musisz dodawać żadnych poprawek.

— Agata
źródło