CSS – atrybuty width i height a wartości procentowe

pytanie zadane 17 czerwca 2022 w HTML i CSS przez Mick_SQ6IYV Obywatel (1,020 p.)

Witajcie! Zastanawiam się jak prawidłowo stosować wartości procentowe w przypadku atrybutów width i height. Tworzę stronę w oparciu o divy i chcę nadać im konkretne wymiary. Podanie wartości tych atrybutów w pikselach sprawia, że strona jest "sztywna" i przy zmianie choćby rozmiarów samej przeglądarki, część zawartości strony znika. Próbowałem stosować wartości procentowe, ale na różnych monitorach div'y rozchodzą się jak mrówki z rozgrzebanego mrowiska. Ten czy inny div odstaje od pozostałych. Względem czego odnoszą się te wartości procentowe? Względem szerokości/wysokości monitora, okna przeglądarki czy może względem nadrzędnego div'a? Jak sprawić, aby div'y nie rozjeżdżały się przy zmianie wymiarów przeglądarki i aby nie były zależne od wymiarów monitora?

komentarz 18 czerwca 2022 przez VBService Ekspert (256,600 p.)
edycja 19 czerwca 2022 przez VBService

Sprawdź:

Wartości wyrażone w procentach
CSS unit guide: CSS em, rem, vh, vw, and more, Explained
Responsive Web Design - Media Queries: [ 1 ] [ 2 ]

P.S. Proste przykłady zastosowania: grid-a [ 1 ] [ 2 ].

2 odpowiedzi

odpowiedź 17 czerwca 2022 przez Marchiew Dyskutant (7,730 p.)
edycja 17 czerwca 2022 przez Marchiew

Zależy też co chcesz osiągnąć. Rozmiaru w pionie bym nie ustawiał w ogóle, chyba że faktycznie potrzebujesz do np. scrolla czy dla efektu wizualnego. Oprócz px oraz % są jeszcze rem, em, vh, vw i zapewne nie tylko. Vh i vw są zależne od rozmiarów okna, a rem i em musisz poczytać, bo nie umiem tego dobrze wytłumaczyć i pewnie bym Cie jeszcze wprowadził w błąd. % tak jak napisałeś - dopasowują się do rodzica/kontenera. Główny rodzic do rozmiarów okna.

EDIT: Co do rozjeżdżania się divów, jeśli nie znasz/nie używałeś, poznaj flexbox oraz grida

odpowiedź 18 czerwca 2022 przez avexperi Początkujący (440 p.)

Czego potrzebujesz to Responsive Web Design.

https://codepen.io/avexperi/pen/oNEOjyq

tutaj pokazałem ci jak liczony jest height i width w procentach, jak wspomniał Marchiew w innym komentarzu od rozmiarów rodzica.

Jeśli chcesz aby wymiar elementu był liczony w procentach od szerokości i wysokości ekranu potrzebujesz tych dwóch jednostek:

vw - to procent liczony od szerokości okna przeglądarki, czyli 50vw to 50 procent szerokości okna przeglądarki niezależnie od rozmiarów innych elementów.

vh - to analogicznie procent liczony od wysokości okna przeglądarki.

Oczywiście jeśli element znajduje się w <body>, nie mając innego rodzica

<body>
   <div class="element">
   </div>
</body>

to nie ma większego znaczenia czy dla tego elementu ustawisz 100% czy 100vw (może być drobna różnica przez pasek do scrollowania, 100vw liczy szerokość całego okna razem z paskiem scrollowania).

Ogólnie podsumowując, żeby wszystko się należycie wyświetlało na wszystkich urządzeniach należy pouczyć się trochę o responsive web design, obrać jeden z dostępnych systemów opracowanych przez kogoś bądź rozwinąc swój system, albo przynajmniej skuteczne metody, na podstawie zdobytej wiedzy.