„„Calc (100%)”Jest funkcją stosowaną w CSS do zastosowania określonych właściwości do elementów HTML zgodnie z instrukcjami matematycznymi podanymi w funkcji. Podobnie, "Wysokość: calc (100%)”Służy do ustawienia wysokości określonego elementu. Czasami ta funkcja nie działa i nie ma wpływu na wyjście pomimo jej obecności w elemencie stylu CSS.

Najczęstszy błąd podczas pisania Calc (100%) Brakuje funkcji każdej właściwości (takiej jak wysokość lub szerokość)pozycja„Właściwość dla elementu, którego wysokość należy zmienić. Jest to rozwiązane, po prostu dodając „pozycja„Właściwość do elementu stylu.

Przykład: Calc (100%) nie działa
Omów ten problem z pomocą prostego przykładu, w którym brakuje właściwości pozycji i zobacz wyjście:

Wysokość: Funkcja Calc (100%)

To jest pole, którego wysokość należy zmienić na wysokość: calc (100%) funkcja

W powyższym fragmencie kodu jest

nagłówek, który mówi „Funkcja obliczania (100%),”A potem jest kontener Div z prostym losowym instrukcją.

Dodajmy element stylu CSS, który odnosi się do powyższych elementów HTML i stylizuj je:

.calc
szerokość: calc (100% - 390px);
granica: 1px Solid Black;
kolor tła: RGB (63, 218, 197);
Text-Align: Center;
Wysokość: calc (100% - 350px);

W powyższym fragmencie kodu istnieją inne właściwości do stylizowania elementu HTML (nagłówka i zawartość klasy DIV), takie jak granica, kolor tła, wyrównanie tekstu. Potem jest „Wysokość: calc (100% - 350px);".

Poniżej pojawią się dane wyjściowe powyższego kodu:

Nie widzimy żadnej zmiany wysokości elementu DIV. Oznacza to, że wysokość: CALC (100%) właściwość nie działa.

Prawidłowy sposób dodania wysokości: Calc (100%) Funkcja

Teraz, jeśli dodamy właściwość pozycji w elemencie stylu, kod będzie działał poprawnie:

.calc
Pozycja: absolutna;
szerokość: calc (100% - 390px);
granica: 1px Solid Black;
kolor tła: RGB (63, 218, 197);
Text-Align: Center;
Wysokość: calc (100% - 350px);

W powyższym fragmencie kodu po prostu dodaliśmy właściwość pozycji, a następujące będzie wyjście po dodaniu właściwości pozycji:

Z powyższego wyjścia możemy wyraźnie zrozumieć różnicę między wyjściem wygenerowanym przez kod, w którym właściwość pozycji i ta, której brakuje właściwości pozycji. W ten sposób wytwarzamy wysokość: calc (100%) działa poprawnie.

Wniosek

Najczęstszym błędem podczas pisania funkcji Calc (100%) dla wysokości jest prawdopodobnie brakująca właściwość pozycji, która prowadzi wysokość: calc (100%), aby nie mieć żadnego wpływu na wyjście. Jest to łatwo rozwiązywane, po prostu dodając właściwość pozycji w tym samym elemencie stylu CSS, w którym dodano funkcję obliczania właściwości wysokości.