Veb sayt dizaynında tez-tez verilən bir sual "bir elementin hündürlüyünü 100% -ə necə təyin edirsiniz?"
Bu asan bir cavab kimi görünə bilər. Bir elementin hündürlüyü 100% -ə təyin etmək üçün CSS- dən istifadə edirsiniz, ancaq bu, həmin elementin bütün brauzer pəncərəsinə uyğun olması üçün həmişə uzanır. Nə bu vəziyyətin və bu vizual stilə nail olmaq üçün nə edə biləcəyinizi öyrənək.
Piksel və Yüzdə
CSS xüsusiyyətini və pikselləri istifadə edən bir dəyərdən istifadə edərək, elementin hündürlüyünü təyin edərkən brauzerinizdə bu qədər çox şaquli yer tutacaqsınız.
Məsələn, hündürlüyü olan bir paraqraf: 100px; dizaynınızda 100 piksellik şaquli yer tutacaq. Brauzerinizin pəncərəsi nə qədər böyük olduğuna baxmayaraq, bu element 100 piksel yüksəklikdə olacaq.
Faizlər pikseldən fərqli olaraq işləyir. W3C spesifikasiyasına əsasən, faiz hündürlüyü konteynerin hündürlüyünə görə hesablanır. Beləliklə, hündürlüyü olan bir paraqraf qoyursanız: 50%; 100px hündürlüyü olan div içərisində paraqraf 50 piksel hündürlüyündə olacaq və bu elementin 50% -i ana elementdir.
Yüzdə Heights səbəbi nədir
Bir veb səhifəni tərtib edirsinizsə və pəncərənin tam hündürlüyünü çəkmək istədiyiniz sütun varsa, təbii meyl bir hündürlüyü əlavə etməkdir: 100%; bu elementə. Bütün bunlardan sonra, eni genişliyə qoyursanız: 100%; element elementin tam üfüqi yerini tutacaq, hündürlük eyni işləməlidirmi? Təəssüf ki, bu heç də belə deyil.
Bunun baş verdiyini anlamaq üçün, brauzerlərin hündürlüyü və genişliyi necə şərh etdiyini anlamalısınız. Veb brauzerlər ümumi genişliyi brauzer pəncərəsinin açıldığı funksiyanı hesablayır. Sənədlərinizdə heç bir genişlik dəyərini təyin etməsəniz, brauzer avtomatik olaraq pəncərənin bütün genişliyini doldurmaq üçün məzmunu axır (100% genişlik default).
Boyu genişlikdən fərqli olaraq hesablanır. Əslində, brauzerlər görünüşün xaricinə çıxdıqdan (beləliklə kaydırma çubuklarını tələb edir) və ya veb-dizaynerin səhifənin bir elementi üçün mütləq bir yüksəklik təyin etmədiyi müddətcə hündürlüyü qiymətləndirməyəcəkdir. Əks təqdirdə, brauzer sadəcə məzmunun hərəkəti sona qədər qədər görünüşün genişliyinə imkan verir. Hündürlüyü əslində heç bir şəkildə hesablanmır.
Yüksəkliklər olmadan üst elementləri olan bir elementdə faiz hündürlüyü təyin edərkən problemlər baş verir - başqa sözlə, əsas elementlər default yüksəkliyə malikdir: avtomatik; . Əslində, brauzerdən bir hündürlüyü müəyyən edilməyən bir dəyərdən hesablamağı xahiş edirsiniz. Null dəyərə bərabər olduğundan, nəticə brauzerin heç bir şey etməməsidir.
Veb səhifələrinizdə hündürlüyü bir faiz təyin etmək istəyirsinizsə, yüksəkliyin müəyyənləşdirilməsini istədiyiniz hər bir elementin yüksəkliyini təyin etməlisiniz. Başqa sözlə, əgər belə bir səhifə varsa:
Burada məzmun
Çox ehtimal ki, Div və 100% hündürlükdə olan paraqrafı istəyirəm, lakin bu div həqiqətən iki elementə malikdir:
və. Divanın hündürlüyünü nisbi hündürlükdə müəyyən etmək üçün, bədən və html elementlərinin hündürlüyünü də təyin etməlisiniz.
Beləliklə, siz div-in deyil, bədən və html elementlərinin hündürlüyünü təyin etmək üçün CSS-dən istifadə etməlisiniz. Bu, bir problem ola bilər, çünki tezliklə bu istənilən effektə nail olmaq üçün 100% hündürlüklə müəyyənləşdirilmiş hər şeylə çarpanlaşa bilərsiniz.
100% Yüksəkliklə İşləyərkən Qeyd Olunacaq Bəzi İşlər
İndi səhifə elementlərinizin hündürlüyünü 100% -ə necə müəyyənləşdirdiyinizi bildiyiniz üçün, çıxmaq və bütün səhifələrinizdə bunu etmək maraqlı ola bilər, ancaq siz xəbərdar olmalısınız bir neçə şey var:
- Margins və padding bir istəmədiyiniz bir kaydırma çubuğunu əlavə edə bilərsiniz. Faiz yüksəkliklərində (və genişliklərdə) işləyənlər ilə gördüyüm ən canişli şeylərdən biri eyni elementlərin üzərindəki padding və marqonlar səhifəyə gedin çubuqları əlavə edə bilər, buna baxmayaraq bütün məzmunda kaydırma çubuqlarına ehtiyac yoxdur. Çünki elementin hündürlüyü və ya eni hesablanan ilk şeydir. Sonra marjlar və paddings əlavə olunur. Beləliklə, 100% hündürlüyü olan bir elementiniz və hər biri 10 pikselin üst və alt marjları varsa, əlavə 20 piksel üçün bir kaydırma çubuğu olacaq. Unutmayın ki, CSS qutusu modeli margin, sərhəd və elementin ölçüsünə əlavə olunur, buna görə də digər qutu model dəyərlərindən hər biri ilə 100% həqiqətən 100% -dən çox olacaq.
- Məzmununuz müəyyən edilmiş yüksəklikdən çox olsa, ondan sonra hər hansı bir şeyin üzərində yazılacaq. Başqa sözlə desək, əgər sütun 80% hündürlükdə olan bir dizaynınız varsa və onun içindəki tərkibi hündürlüyün 100% -ni təşkil edəcəksə, əlavə 20% sütunun altında davam edəcək və vizual dizaynı pozacaq səhifəinizin. Sütunun altındakı məzmun varsa, mətn sadəcə bunun üst hissəsini yazır. Mən tez-tez bir web dizayn bir səhifə hündürlüyü məcbur etməyə çalışır və başlamaq üçün mükəmməl işləyir, lakin bu səhifə məzmun gələcəkdə dəyişir, onların mütləq yüksəkliklərdə səhifə axını tamamilə pozur zaman baş verir. Genişlik və hündürlüyü görünüşün ölçüsü ilə dəyişməlidir cavab verən saytlar qurarkən bu iki dəfə doğrudur.
Bunu düzəltmək üçün elementin hündürlüyünü də təyin edə bilərsiniz. Avtomatik olaraq qurarsanız, lazım olduqda kaydırma çubuqları görünəcək, lakin olmadıqda yox olacaq. Vizual fasiyanı düzəldir, ancaq onları istəməyəcəyiniz scrollbars əlavə edir.
Viewport vahidlərindən istifadə
Bu çətinliklə mübarizə aparmaq üçün başqa bir üsul CSS Viewport vahidləri ilə təcrübə etməkdir. Ölçü vahidinin ölçü vahidindən istifadə edərək, görünən portun müəyyən bir hündürlüyü çəkmək üçün elementləri ölçə bilərsiniz və görünüş dəyişikliyi kimi dəyişəcək! Bu bir səhifədə 100% hündürlüyün görselliyini əldə etmək üçün böyük bir yoldur, lakin hələ də fərqli cihazlar və ekran ölçüləri üçün çevik olur.