Mubvunzo unowanzobvunzwa mubhuku rekushandura ndewe "unoisa sei kukwirira kwechimwe chinhu kune 100%"?
Izvi zvingaratidzika semhinduro iri nyore. Iwe unongoshandisa CSS kuti uise kukwirira kwechimwe chinhu kune 100%, asi izvi hazvirevi nguva dzose kuti chinhu chikwanise kufambisa yose browser browser. Ngatitsvakei kuti nei ichi ichiitika uye zvaunogona kuita kuti uwane chimiro ichi chinoratidzwa.
Pixels nePcenter
Paunotsanangura kureba kwechimwe chinhu uchishandisa CSS pfuma uye kukosha kunoshandisa pixels, ichocho chinotora nzvimbo yakareba yakajeka mukati mutsvaga.
Somuenzaniso, ndima nerefu: 100px; inotora mapikisi mazana zana ematendi munzvimbo yako. Hazvina basa kuti hurukuro yako yefabhenji ndeyei, ichi chinhu chichava mapikiseti zana pakureba.
Mazana anoshanda zvakasiyana pane mapikisi. Maererano nehuwandu hweW3C, zvikamu zvepamuviri zvinotarwa pamwe nekuremekedza kukwirira kwemuumbi. Saka kana iwe ukaisa ndima nerefu: 50%; mukati mukati ma div ane urefu hwe 100px, ndima ichava 50 pixels muhupamhi, iyo 50% yemubereki chinhu.
Nei zvikamu zveMapfumbamwe zvinokundikana
Kana uri kugadzira peji yepawebhu, uye iwe une chinyorwa chaunoda kutora kukwana kwakakwana kwewindo, kutenderera kwepanyama ndiko kuwedzera urefu: 100%; kune icho icho. Pashure pezvose, kana iwe ukaisa upamhi kuhupamhi: 100%; icho chinotora nzvimbo yakazara yakakwana ye peji, saka kukwirira kunofanira kushanda zvakafanana, zvakarurama? Zvinosuruvarisa, iyi haisi iyo nyaya zvachose.
Kuti unzwisise kuti nei izvi zvichiitika, unofanira kunzwisisa kuti browsers inoshandura sei urefu uye upamhi. Mawebvu eWebhu akaverenga huwandu hwehuwandu hwahwo hunoenderana nekushandiswa kwemahwindo evheji rekushandura. Kana iwe usingaiti chero huwandu hwehupamhi pane zvinyorwa zvako, mushanduri wacho achangoerekana achiyerera zviri mukati kuitira kuzadza upamhi hwose hwehwindo (100% width ndiyo yakashata).
Kurema kukosha kunoverengeka zvakasiyana nekuwedzera. Kutaura zvazviri, vashandisi havaongorori hurefu zvachose kunze kwekuti zvinyorwa zvirefu zvokuti zvinobuda kunze kwechitarisiko (saka zvinoda mapurisa emupumburu) kana kana web designer inotarisa kukwana kwakakwana kwechimwe chinhu pane peji. Kana zvisina kudaro, mushanduri wacho anongobvumira kuti zvinyorwa zvifambe mukati mehupamhi hwebhuku kusvikira zvasvika kumagumo. Iyo yakakwirira haina kunyatsoverengwa zvachose.
Zvinetso zvinoitika kana iwe ukaisa huwandu hwehupamhi pane chimwe chinhu chine mitezo yemubereki asina nzvimbo dzakakwirira-mune mamwe mazwi, zvinhu zvemubereki zvinenge zvisingasviki urefu: auto; . Iwe uri, chaizvoizvo, uchikumbira shanduro kuverenga urefu kubva pane zvisinganzwisisiki. Sezvo izvozvo zvaizoenzana pasina-kukosha, chigumisiro ndechokuti musikana wacho haaiti chinhu.
Kana iwe uchida kuisa urefu pamapeji ako ewebhu kune peji, unofanirwa kuisa kukwirira kwemumwe mubereki chinhu cheyo iwe waunoda kuti urefu hwakatsanangurwa. Mune mamwe mazwi, kana iwe une peji rakafanana neizvi:
Zviripo apa
Iwe unogona kunge unoda div uye ndima iri mairi kuti ive ne100% yakakwirira, asi icho div zvechokwadi ine zvinhu zviviri zvevabereki:
and. Kuti urondedze kureba kwechi kusvika kune imwe yakakwirira, unofanira kuisa kukwirira kwemuviri uye html zvinhu zvakare.
Saka iwe unoda kushandisa CSS kuti uise hupamhi hweasati chete div, asiwo muviri uye html zvinhu. Izvi zvinogona kuva dambudziko, sezvo iwe unogona kukurumidza kugadzikana nezvose zvakasarudzwa kusvika ku100% yakakwirira, chete kuti uite izvi zvinodiwa.
Zvimwe Zvinhu Zvinofanira Kuziva Paunoshanda ne 100% Heights
Iye zvino zvaunoziva kuisa hupamhi hwepakati peji yako mapeji kusvika ku100%, zvinogona kufadza kuenda kunze uye kuzviita pamapeji ako ose, asi kune zvinhu zvishomanana zvaunofanira kuziva:
- Margins uye padding vanogona kuwedzera bhari yemupumburu uko iwe usingadi imwe. Chimwe chezvinhu zvinonyanya kukuvadza zvandakawana nekushanda nemazana ezviuru zvepamusoro (uye widths) ndezvokuti ipapo padding nemagumisiro pamusoro pezvimwe zvikamu zvinogona kuwedzera mipumburu yepumburu peji, kunyange zvazvo zvese zviripo zvinoratidza pasina unoda mipumburu. Izvi ndezvokuti kukwirira kana upamhi hwecho chinhu ndicho chinhu chekutanga chinotarirwa. Zvadaro maruva nemapadings zvinowedzerwa. Saka kana iwe uine chinhu chakakura che 100% uye kumusoro uye pasi kwemaserikisi gumi ega ega, pachava nebhari yepumburu yemamwe pixels makumi maviri. Yeuka, iyo CSS box model inowedzera margin, muganhu, uye padding pamusoro pehukuru hwechimwe chinhu, saka 100% neimwe yeiyo mamwe mabhokisi ekuenzanisa maitiro achave aripo anopfuura 100%.
- Kana yako zvinyorwa zvinotora zvinopfuura zvinotsanangurwa zvakakwirira, zvichanyora chimwe chinhu shure kwayo. Mune mamwe mazwi, kana iwe une chigadziro chine chinyorwa chiri 80% muhupamhi, uye zviri mukati mazvo zvinotora 100% yehupamhi, kuti zvimwe 20% zvicharamba zvichidzika pasi pekhomu uye kuputsa maziso anooneka ye peji rako. Kana pane zvakakanganiswa pasi pekhoma iyo, mashoko acho achangonyora pamusoro payo. Ndinowanzoona izvi zvichiitika apo web designer anoedza kumanikidzira kureba peji uye inoita kuti ikwanise kushanda pakugadzira, asi kana zvinyorwa zviri papeji iyoyo zvichichinja mune ramangwana, zvikwata zvavo zvakakwana zvinoputsa kupera kwejiji. Izvi ndezvechokwadi chechokwadi paunenge uchivaka mawebsite anovhura ane upamhi uye hurefu hunofanira kuchinja nehukuru hwechitarisiko.
Kugadzirisa izvi, unogona kuisa urefu hwechikamu chacho zvakare. Kana iwe uchiisa kune motokari, mipumburu inopenya ichaonekwa kana ichidikanwa asi inonyangarika kana isiri iyo. Izvozvo zvinogadzirisa kuona, asi inowedzera scrollbars uko iwe usingadi.
Achishandisa Unport Units
Imwe nzira iyo iwe unogona kugadzirisa dambudziko iri nderokuedza neCSS Viewport Units. Nokushandisa maonero ekusimudza chiyero chekuyera, unogona kukura zvikamu kuti utore hurefu hwakatsanangurwa hwechikwata chekuona, uye icho chichachinja sechiratidzo chekuona! Iyi inzira yakanakisisa yekuita kuti 100% yako ionekwe mavara pa peji asi ichiita kuti iyanane nemasikirwo akasiyana uye masikirwo emavhura.