• 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

Aruba Cloud - Virtual Private Server VPS
+3 głosów
507 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 (256,600 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,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
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 390 wizyt
+1 głos
2 odpowiedzi 672 wizyt
0 głosów
1 odpowiedź 266 wizyt

93,324 zapytań

142,323 odpowiedzi

322,389 komentarzy

62,653 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...