Różnica między wysokością CSS Top 100% vs wysokość auto

"Wysokość: 100%”Ustawia wysokość pojemników na Dziecko Div zgodnie z wysokością kontenera nadrzędnego. Ta wartość właściwości ustawia wysokość dziecka dokładnie równa wysokości zdefiniowanej w elemencie nadrzędnym. Ale kiedy "Wysokość: Auto”Jest używany do elementu, ustawi wysokość wartości elementów dziecka, a nie dziedziczy wartość z elementu nadrzędnego.

Ten blog rozróżni CSS „Wysokość: 100%” i ​​„Wysokość: auto”.

Jak działa „wysokość: 100%” w HTML?

Określenie dowolnej liczby wartości procentowych jako wysokości elementu dziecka odpowiednio dostosuje wysokość. Tak więc 100% wysokość ustawi wysokość elementu dziecka w taki sposób, że w pełni pokrywa on obszar elementu nadrzędnego. Na przykład ustawienie „wysokość”Elementu dziecięcego do„50%”(Wysokość: 50%) ustawi wysokość elementu dziecka jako połowę jego elementu macierzystego.

Przykład: Zastosowanie właściwości „Wysokość: 100%” na obraz
Zrozumiemy zastosowanie wysokości: 100% w kodzie HTML:

W powyższym fragmencie kodu:

• W przypadku elementu DIV wartość właściwości wysokości CSS jest zdefiniowana jako „200px".
• Wewnątrz div jest „img”Element ustawiony jako element dziecięcy powyższego elementu kontenera Div. Jego wysokość jest ustawiona na „100%”(Wysokość: 100%). Oznacza to, że wysokość obrazu zostanie ustawiona zgodnie z wartością pikselową zdefiniowaną w pojemniku Dysp, i.mi., "200px".

To wygeneruje następujące dane wyjściowe:

Teraz, jeśli zmienimy wartość właściwości Wysokości w elemencie Div (na przykład od 200 px do 300px), ustawi rozmiar obrazu na „300px”:

To zmieni wysokość obrazu na „300px”A obraz będzie wyświetlany w ten sposób:

Jak działa nieruchomość „wysokość: auto” w HTML?

„„Wysokość: Auto”Właściwość ustawia wysokość elementu dziecka na wartość zdefiniowaną w tym elemencie dziecięcym. Na przykład, jeśli istnieje element nadrzędny, który ma wysokość „300px”I ma element dziecięcy z„ Wysokiem: auto ”. Następnie, wewnątrz tego elementu (zawierający „Wysokość: auto”), wszystkie elementy dziecięce będą miały wysokość zgodnie z definicją. Mówiąc dokładniej, element dziecka nie odziedzi wartości z elementu nadrzędnego.

Przykład: Zastosowanie właściwości „Wysokość: automatyczne” do obrazu
Rozumiemy to z prostym przykładem fragmentu kodu HTML:

W powyższym fragmencie kodu:

• Tutaj dodaliśmy element kontenera Div z atrybutem stylu i właściwością wbudowaną CSS jako „Wysokość: 300px".
• Wewnątrz elementu kontenera Div znajduje się inny kontener DIV z właściwością w stylu CSS ustawiony jako „automatyczny".
• Wewnątrz drugiego elementu DIV, „img”Dodano element (dziecko powyższego elementu DIV). Ma atrybut stylu z właściwością wysokości z ustawioną wartością do „250px".
• Oznacza to, że wysokość obrazu zostanie ustawiona na „250px”, ponieważ jego element nadrzędny ma „Wysokość: Auto”.

Wyjście

Teraz, jeśli zmienimy wartość „wysokość„Własność Div Child Div, odpowiednio zmieni wysokość obrazu w wyjściu:

To ustawi wysokość obrazu jako „150px”W wyjściu:

To podsumowuje różnicę między CSS ”Wysokość: 100%" Vs "Wysokość: Auto".

Wniosek

CSS „Wysokość: 100%”Ustawia wysokość elementu dokładnie tak, jak zdefiniowany w jego elemencie nadrzędnym. Z drugiej strony, kiedy „Wysokość: Auto”Jest używany w elemencie, ustawia wysokość elementów dziecięcych zgodnie z definicją w elementach dziecięcych i nie dziedzicza wysokości z elementu nadrzędnego. W tym poście omówiono różnicę między CSS „Wysokość: 100%” a „Wysokość: auto”.