Wartości procentowe w CSS może być trudne. Kiedy ustawisz wysokość Właściwość CSS elementu na 100% co konkretnie ustawiasz na 100%? To główne pytanie, które napotykasz, gdy masz do czynienia z wartościami procentowymi w CSS, a ponieważ układy stają się bardziej złożone, to o wiele trudniej jest śledzić wartości procentowe, co skutkuje wręcz dziwnym zachowaniem, jeśli nie jesteś ostrożny.
Praca z procentami ma wyraźną przewagę; Układy oparte na procentach automatycznie dostosowują się do różnych rozmiarów ekranu. Dlatego używanie wartości procentowych jest niezbędne w responsywnym projektowaniu. Popularne systemy siatek i frameworki CSS używają wartości procentowych do tworzenia responsywnych siatek.
Oczywiście, są pewne sytuacje lepiej dopasowane do wartości statycznych, a inne, które działają znacznie lepiej z czymś adaptacyjnym, takim jak procenty. Musisz zdecydować, którą trasę wybrać z elementami w swoim projekcie.
Jednostki statyczne
Piksele są statyczne. Dziesięć pikseli na jednym urządzeniu to dziesięć pikseli na każdym urządzeniu. Jasne, są takie rzeczy jak gęstość i sposób, w jaki urządzenie faktycznie interpretuje, czym jest piksel, ale nigdy nie zobaczysz większych zmian, ponieważ ekran ma inny rozmiar.
Dzięki CSS możesz łatwo zdefiniować element wysokość w pikselachi pozostanie bez zmian. To przewidywalne.
dziel {
wysokość: 20px;
}
To się nie zmieni, chyba że zmienisz to za pomocą JavaScript lub czegoś podobnego.
Teraz jest druga strona tej monety. To się nie zmieni. Oznacza to, że musisz wszystko dokładnie zmierzyć, a nawet wtedy Twoja witryna nie będzie działać na wszystkich urządzeniach. Dlatego jednostki statyczne zwykle lepiej sprawdzają się w przypadku elementów podrzędnych, multimediów i rzeczy, które zaczną się zniekształcać i wyglądać dziwnie, jeśli się rozciągną i rozrosną.
Ustawienie wysokości elementu na 100%
Czy po ustawieniu wysokości elementu na 100% rozciąga się on na całą wysokość ekranu? Czasami. CSS zawsze traktuje wartości procentowe jako procent elementu nadrzędnego.
Bez elementu nadrzędnego
Jeśli stworzyłeś świeży który jest zawarty tylko w tagu body Twojej witryny, 100% prawdopodobnie będzie odpowiadać wysokości ekranu. To znaczy, chyba że zdefiniowałeś wartość wysokości dla.
HTML:
CSS:
dziel {
wzrost: 100%;
}
Że wysokość elementu będzie równa wysokości ekranu. Domyślnie rozciąga się na cały ekran, więc jest to podstawa, której przeglądarka używa do obliczania wysokości elementu.
Z elementem macierzystym o statycznej wysokości
Gdy twój element jest zagnieżdżony w innym elemencie, przeglądarka użyje wysokości elementu nadrzędnego do obliczenia wartości 100%. Tak więc, jeśli twój element znajduje się wewnątrz innego elementu, który ma wysokość 100px i ustawisz wysokość elementu potomnego na 100%. Element potomny będzie miał wysokość 100 pikseli.
HTML:
CSS:
#rodzic {
wysokość: 100px;
}
#dziecko {
wzrost: 100%;
}
Wysokość dostępna dla elementu potomnego jest ograniczona przez wysokość rodzica.
Z elementem macierzystym o procentowej wysokości
Może się to wydawać sprzeczne z intuicją, ale możesz ustawić wysokość elementu na procent. Gdy element ma element nadrzędny, którego wysokość jest również określona jako wartość procentowa, przeglądarka użyje tej samej wartości co element nadrzędny, którą już obliczyła na podstawie jego elementu nadrzędnego. To dlatego, że 100% wartości to nadal ta wartość.
CSS:
#rodzic {
wzrost: 75%;
}
#dziecko {
wzrost: 100%;
}
W tym przypadku wysokość elementu nadrzędnego wynosi 75% całego ekranu. Dziecko ma zatem 100% całkowitej dostępnej wysokości.
Z elementem macierzystym bez wysokości
Co ciekawe, gdy element nadrzędny nie ma zdefiniowanej wysokości, przeglądarka będzie przechodzić w górę poziom po poziomie, aż znajdzie konkretną wartość, z którą może pracować. Jeśli dotrze aż do bez znalezienia czegokolwiek, przeglądarka domyślnie ustawi się na wysokość ekranu, dając Twojemu elementowi równoważną wysokość.
HTML:
CSS:
#rodzic {}
#dziecko {
wzrost: 100%;
}
Element potomny rozciąga się aż do górnej i dolnej części ekranu.
Jednostki rzutni
Ponieważ obliczenia z jednostkami procentowymi mogą być trudne, a każdy element jest powiązany ze swoim rodzicem, istnieje zestaw jednostek, które ignorują to wszystko i podstawowe rozmiary elementów bezpośrednio z dostępnego ekranu przestrzeń. Są to jednostki rzutni, które dają bezpośredni rozmiar na podstawie wysokości lub szerokości ekranu, bez względu na to, gdzie znajduje się element.
Aby ustawić element wysokość równej wysokości ekranu, ustaw jego wysokość na 100vh.
dziel {
wysokość: 100vh;
}
Robiąc to, łatwo jest zepsuć układ i musisz być świadomy, jakie inne elementy będą wpływ, ale widoczny obszar jest zdecydowanie najbardziej bezpośrednim sposobem ustawienia wysokości elementu na 100% of ekran.