Dlaczego wysokość najwyższa 100% nie pracuje, aby rozszerzyć Divy na wysokość ekranu?

W HTML użytkownik może tworzyć jeden lub więcej kontenerów za pomocą „" Lub "" elementy. Ponadto CSS pozwala użytkownikowi modyfikować szerokość i wysokość kontenera zgodnie z ich potrzebą. Jednak wysokość: 100% nie działa, ponieważ zależy od elementu nadrzędnego. Aby to zrobić, najpierw ustaw wysokość elementu nadrzędnego, a następnie ustaw wysokość div.

Ten zapis wyjaśni wysokość: 100% w celu rozszerzenia Divs na wysokość pełnego ekranu.

Dlaczego wysokość: 100% pracuje nad rozszerzeniem DIV na wysokość ekranu?

Jeśli użytkownicy chcą skorzystać z reguły stylu ”Wysokość: 100%„Aby uczynić kontener Div pełną wysokością ekranu, po prostu nie działa, ponieważ procent (%) jest jednostką względną, co oznacza, że ​​wysokość końcowa będzie zależeć od wysokości elementu nadrzędnego.

Aby użyć liczby procentowej dla wysokości, należy również ustalić wysokość rodzica. Jedyną opcją jest element nadrzędny/root ””, Który pozwala na zwiększenie Divs na pełny ekran.

Jak ustawić wysokość: 100% dla rozszerzania Divs na pełny ekran?

Ustawić "Wysokość: 100%”Praca nad rozszerzeniem DIVS na wysokość ekranu, wypróbuj podane instrukcje.

Krok 1: Utwórz pojemnik „Div”

Początkowo stwórz kontener DIV za pomocą „”Element i wstaw atrybut klasy, aby zidentyfikować konkretny pojemnik za pomocą nazwy klasy. Następnie osadziłem trochę tekstu między znacznikiem:

Linuxhint Ltd UK

Można zauważyć, że pojemnik Div ​​został pomyślnie utworzony:

Krok 2: Zestaw „Wysokość: 100%

Aby rozwinąć DIV na wysokość ekranu, uzyskać dostęp do strony HTML i ciała bezpośrednio po nazwie „html", I "ciało". Uzyskaj również dostęp do kontenera Div za pomocą nazwy klasy z selektorem kropkowym jako „.pełna wysokość”:

html, ciało, .pełna wysokość
Wysokość: 100%;
Min-Eight: 100% !ważny;

Tutaj:

• "wysokość”Właściwość ustawia wysokość dostępnego elementu. W takim przypadku wysokość jest ustawiona jako „100%".
• Następnie ustaw „Min-Height" Jak "100%”I zastosuj ważną zasadę na tej nieruchomości.
• „„!ważny„Reguła jest wykorzystywana do ustawiania większego znaczenia właściwości lub wartości niż jej normalna wartość.

Krok 3: Styl kontener „Div”

Wykorzystał nazwę klasy i selektor jako „.pełna wysokość„Aby uzyskać dostęp do kontenera Div i zastosować poniżej nieruchome właściwości CSS:

.pełna wysokość
szerokość: 500px;
Tło: RGB (154, 208, 240);
Text-Align: Center;
pogrubiona czcionka;
Styl czcionki: Kursywa;

Według danego fragmentu kodu:

• "szerokość”Służy do określenia szerokości elementu.
• "tło”Określa kolor tylnej części elementu.
• "tekst-align„Własność jest wykorzystywana do ustawiania wyrównania tekstu.
• "czcionka”Służy do określenia konkretnej czcionki tekstu.
• "styl czcionki”Określa styl tekstu. Aby to zrobić, wartość tej właściwości jest ustalana jako „italski".

Wyjście

Chodzi o ustawienie wysokości: 100% za pracę nad wzmocnieniem DIVS na pełnym ekranie.

Wniosek

Aby użyć liczby procentowej dla wysokości, należy również ustalić wysokość rodzica. Jedynym wyjątkiem jest element główny „”, Który pozwala procentowi wysokości rozszerzyć Divs na pełny ekran. Aby to zrobić, dostęp do elementów HTML, Body i Div i ustaw „wysokość" Jak "100%" I "Min-Height" Również "100%". Ten samouczek wyjaśnił o wysokości: 100% prac nad rozszerzeniem DIV na pełny ekran.