• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS – atrybuty width i height a wartości procentowe

Object Storage Arubacloud
+3 głosów
323 wizyt
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?
1
komentarz 18 czerwca 2022 przez VBService Ekspert (254,630 p.)
edycja 19 czerwca 2022 przez VBService

Sprawdź:  

 

 

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

2 odpowiedzi

0 głosów
odpowiedź 17 czerwca 2022 przez Marchiew Dyskutant (7,690 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
0 głosów
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.

Podobne pytania

+1 głos
2 odpowiedzi 332 wizyt
+1 głos
2 odpowiedzi 345 wizyt
0 głosów
1 odpowiedź 209 wizyt

92,703 zapytań

141,616 odpowiedzi

320,180 komentarzy

62,062 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...