Саволномаи умумӣ дар тарҳрезии вебсайт «Чӣ гуна шумо баландии элементро ба 100% муқаррар кардаед»?
Ин метавонад ба мисли ҷавоби осон пайдо шавад. Шумо фақат CSS-ро барои гузоштани баландии элемент ба 100%, аммо ин ҳама воҳима намегардад, ки ҳамаи тирезаи браузерро мувофиқ кунед. Биё бифаҳмем, ки чаро ин ҳолат ва чӣ барои шумо метавонед ба ин услуби визуалӣ кӯмак кунед.
Пикселҳо ва фоизҳо
Вақте ки шумо баландии элементро бо истифодаи амволи CSS ва арзиши пикселҳо муайян карда истодаед, он элемент ин фазои амудиро дар браузер мегирад.
Масалан, параграф бо баландӣ: 100px; 100 пиксел дар филми амудӣ ба шумо намоиш хоҳад дод. Он чӣ қадаре, ки тирезаи браузери шумо аст, муҳим аст, ин унсури 100 пиксел дар баландии хоҳад буд.
Муҳофизакорон аз пикселҳо фарқ мекунанд. Мувофиқи муқаррароти W3C, баландии фоизҳо нисбат ба баландии контейнер ҳисоб карда мешавад. Пас, агар шумо параграфро бо баландӣ гузоред: 50%; дар дохили як бо баландии 100px, параграф 50 пиксел дар баландии 50% -ро ташкил медиҳад.
Чаро чароғҳои фароғат ноком накарданд
Агар шумо тарҳрезии вебсайт ҳастед, ва шумо сутуне доред, ки мехоҳед, то баландии баландии равзанаро гиред, табии табиат ба баландии 100%; ба он элемент. Баъд аз ҳама, агар шумо паҳнои паҳншавӣ ба паҳншавӣ: 100%; элемент фазои банақшагирии саҳифаро мегирад, то баландии он бояд ҳамон кор кунад, рост бошад? Мутаассифона, ин ҳолат дар ҳама ҳолат нест.
Барои фаҳмидани чаро ин рӯй медиҳад, шумо бояд бифаҳмед, ки чӣ тавр браузерҳо баланд ва васеъро муайян мекунанд. Вебҳои браузерҳо маҷмӯи умумии дастрасиро ҳамчун функсияи васеи тирезаи браузер кушодан ҳисоб мекунанд. Агар шумо ягон арзиши васеъро дар ҳуҷҷатҳои худ муқаррар накарда бошед, браузер ба таври худкор мундариҷаро пур мекунад, то ки тамоми паҳнои тирезаро пур кунед (100% width варианти дигар аст).
Арзиши баландии андоз аз паҳншавии гуногун ба ҳисоб гирифта мешавад. Дар ҳақиқат, браузерҳо баландии ҳама арзёбӣ намекунанд, агар мӯҳтаво то он даме, ки берун аз варақа барпо шавад (аз ин рӯ, сутунҳои гузаришро талаб мекунад) ё агар дизайнерҳои вебсерӣ барои унсуре дар саҳифа баландтар бошад. Дар акси ҳол, браузери оддитарин ҷараёнҳои мундариҷаро дар доираи васеъшавии тамошобин то ба охир мерасад. Дарозии асл на ҳама вақт ҳисоб карда мешавад.
Масъалаҳо вақте, ки шумо дар баландии болоӣ ба унсури воҳиди воҳиди вертолёт гузошта шуда истодаед - бо ибораи дигар, унсурҳои волидайн дорои баландии муқаррарӣ доранд: auto; . Шумо, аслан, браузери дархостро барои ҳисоб кардани баландии аз арзиши номаҳдуд. Азбаски ин ним арзиш дорад, натиҷа он аст, ки браузер ҳеҷ кор намекунад.
Агар шумо хоҳед, ки андозаи дар саҳифаҳои вебсайтро ба андозаи муқаррарӣ муқаррар созед, шумо бояд баландии ҳар як ҷузъи волидайнро, ки шумо мехоҳед баландтарин муайян кунед. Ба ибораи дигар, агар шумо чунин саҳифаро дошта бошед:
Дар ин ҷо
Шумо эҳтимол мехоҳед div ва параграф дар он 100% баландтар дошта бошед, аммо он div дорои ду унсури волидайн дорад:
ва. Барои муайян кардани баландии div ба баландии нисбӣ, шумо бояд баландии бадан ва html элементҳоро низ гузоред.
Барои ҳамин, шумо бояд CSS-ро барои танзим додани баландии на танҳо div, балки элементҳои бадан ва html истифода баред. Ин метавонад душворӣ бошад, зеро шумо метавонед зудтар бо ҳама чизҳое, ки 100% баландтарин доранд, танҳо барои ноил шудан ба ин таъсири дилхоҳ худдорӣ кунед.
Баъзе чизҳо бояд бифаҳманд, ки ҳангоми кор бо 100% баландӣ
Акнун шумо медонед, ки чӣ тавр ба баландии элементҳои саҳифаи худ то 100% муқаррар кунед, он метавонад ҷолиби диққати берун рафтан ва ба ҳамаи саҳифаҳои худ монанд бошад, аммо чанд чизро бояд фаромӯш кардед:
- Нишондиҳандаҳо ва фулуза метавонанд воҳиди пайвандро, ки шумо намехоҳед, илова кунед. Яке аз чизҳои аз ҳама ҷаззобе, ки ман бо кори баландсифат (ва паҳншавӣ) ёфтам, ин аст, ки пасандозҳо ва маржинҳо дар ин элементҳо ба саҳифа пайванданд, ҳатто агар ҳамаи мундариҷаҳо бе зарурати пӯшидани scroll. Ин сабаби он аст, ки баландии ё паҳнои элемент аввалин чизест, ки ҳисоб карда мешавад. Сипас, маржинҳо ва падакҳо илова карда мешаванд. Пас, агар шумо элементар бо 100% ва унсурҳои боло ва поёнии 10 pixels дошта бошед, барои 20 пиксел иловагӣ мавҷуд аст. Дар хотир доред, ки модели CSS ба марҷ, марз ва пазандаро ба андозаи элемент илова мекунад, то 100% бо арзиши ягон қуттиҳои дигари қутбнамо беш аз 100% зиёдтар бошад.
- Агар мундариҷаи шумо аз баландии муайян зиёдтар бошад, пас он чизе, ки пас аз он рӯй медиҳад. Ба ибораи дигар, агар шумо дизайн бо сутуне, ки 80% дар баландии он дошта бошад ва муҳтавои он дар 100% баландтарин бошад, он 20% иловаи сутуни поёнро давом медиҳад ва тарҳрезии визуалӣ аз саҳифаи шумо. Агар муҳтавои поёнии сутун бошад, матн танҳо бар болои он менависад. Ман бисёр вақт инро мебинам, вақте ки тарҳрези вебсайт кӯшиш мекунад, ки баландии саҳифаро қувват диҳад ва онро барои коргузорӣ комилан муваффақ гардонад, аммо вақте ки мундариҷаи ин саҳифа дар оянда тағйир меёбад, баландии мутлақҳои онҳо пурра ҷараёни ахлоқро вайрон мекунад. Вақте ки шумо сохтани вебсафҳаҳои ҷавобӣ, ки васеъ ва баландии он бо андозаи вариант тағйир меёбад, ин ду баробар аст.
Барои ислоҳ кардани ин, шумо метавонед баландии элементро низ гузоред. Агар шумо ба он автоматӣ насб кунед, агар онҳо лозим ояд, лутфҳои пайраҳа пайдо мешаванд, вале вақте ки онҳо нестанд, нобуд мешаванд. Ин ба танаффуси визуалӣ ҷавоб медиҳад, аммо он scrollbars илова мекунад, ки шумо онҳоро нахоҳед.
Истифодаи ҷузъҳои Намоишгоҳ
Роҳи дигареро, ки шумо метавонед ин мушкилотро ҳал кунед, озмоиш бо CSS Viewport Units. Бо истифода аз воҳиди баландии андозаи вариант , шумо метавонед унсурҳоро барои баланд бардоштани тахассуси вариант ба даст меоред ва ин тағйиротро ҳамчун намуди тағйирот тағйир хоҳад кард! Ин роҳи хубест, ки ба 100% баландии садои шуморо дар саҳифа бароред, аммо ҳоло ҳам онҳо барои дастгоҳҳои гуногун ва андозаи экран иваз карда мешаванд.