różnica między wysokością css: 100% a wysokością: auto

167

W wywiadzie zadano mi pytanie „jaka jest różnica między CSS height:100%a height:auto?”

Czy ktoś może wyjaśnić?

css

— Gowsikan
źródło

236

height: 100% nadaje elementowi 100% wysokość jego kontenera nadrzędnego.

height: auto oznacza, że wysokość elementu będzie zależała od wysokości jego dzieci.

Rozważ te przykłady:

wysokość: 100%

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv ma zamiar mieć height: 50px

wysokość: auto

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv ma zamiar mieć height: 10px

— Manish Mishra
źródło

5

Myślę, że w przypadku 'height: auto #innerDiv będzie 10px + the size it needs for its own content- zobacz ten jsfiddle

— BornToCode

@Manish Mishra: Jaki jest najlepszy responsywny projekt? Ustawianie wysokości elementu potomnego lub elementu kontenera i pozwalanie drugiemu na wyprowadzenie jego wysokości?

— John Strood

@Djack, wszystko zależy od tego, jakiego wyglądu, stylu i zachowania oczekujesz od swojego projektu na różnych ekranach, i odpowiednio piszesz swój css. Nie ma takiej ogólnej reguły globalnej jak setting the height of the child element or the container element. Możesz zrobić wszystko, co musisz, aby osiągnąć swój projekt, pod warunkiem przestrzegania pewnej spójności, unikania powielania, zmniejszania liczby poprawek, grupowania wspólnych układów. Krótko mówiąc, w twojej pracy musi istnieć system / wzór, aby był łatwy do odczytania i zmiany oraz oczywiście fakt, że działał

— Manish Mishra

2

Myślę, że dobrym sposobem myślenia o automacie jest to, że „niepokoisz” wzrost - to tak, jakbyś go nie ustawiał.

— niico

1

Zmodyfikowałem skrzypce udostępnione przez BornToCode powyżej, aby było bardziej oczywiste, autoże element rośnie, aby pomieścić ZARÓWNO jego zawartość, jak i zawartość jego dziecka. Natomiast wartość Stała wysokość nie powiększa (ani nie pokazuje) treści, które nie mieszczą się w zadeklarowanej wysokości. jsfiddle.net/m3f8y6xr/1 Uważam, że ta odpowiedź nie jest wystarczająco sformułowana, aby wydawało się, że element będzie obejmował całą zawartość, niezależnie od tego, czy będzie to własny tekst, czy treść dziecka. Oczywiście można argumentować, że jego własny tekst też jest dzieckiem. Zapewnia to wizualne potwierdzenie zachowania.

— SherylHohman

5

Wysokości 100% za to, przypuszczalnie, wysokość swojej wewnętrznej okna przeglądarki , ponieważ jest to wysokość jego rodzica , strona. autoWysokość będzie minimalna wysokość od potrzeby zawierać .

— Rohit Azad
źródło

3

Niekoniecznie jest to poprawne, jeśli element nadrzędny ma określoną wysokość, która nie pasuje do rozmiaru okna przeglądarki

— goonerify

1

Domyślnie jest height: autow przeglądarce, ale height: X%określa procentową wysokość bloku zawierającego.

— Vahid Heydarinezhad
źródło

0

height: 100% działa, jeśli kontener nadrzędny ma określoną właściwość height, w przeciwnym razie nie będzie działać

— Chukwuemeka
źródło