Ib lo lus nug feem ntau hauv qhov website tsim yog "ua li cas koj teev qhov siab ntawm lub keeb rau 100%"?
Qhov no yuav zoo li cov lus teb yooj yim. Koj tsuas siv CSS los teeb qhov siab ntawm lub caij mus rau 100%, tab sis qhov no tsis tas ncab tias lub caij kom haum tag nrho cov qhov rai qhov rais. Cia peb kawm saib yog vim li cas qhov no tshwm sim thiab koj yuav ua li cas thiaj li ua tiav qhov kev pom zoo no.
Pixels thiab Feem pua
Thaum koj txhais tau qhov siab ntawm lub caij uas siv CSS cov cuab yeej thiab tus nqi uas siv cov pixels, lub caij ntawd yuav siv sij hawm ntau qhov chaw ntsug hauv qhov browser.
Piv txwv, ib pawg lus muaj qhov siab: 100px; yuav siv li ntawm 100 pixels ntawm qhov chaw seem hauv koj tsim.Nws tsis txawv npaum li cas koj qhov rais qhov rais, qhov no yuav yog 100 pixels qhov siab.
Feem pua ua haujlwm txawv dua li pixels. Raws li W3C specification, feem pua heights yog xam nrog rau lub thawv qhov siab. Yog li ntawd yog tias koj muab ib pawg lus nrog qhov siab: 50%; hauv div nrog ib qhov siab ntawm 100px, cov pawg lus yuav yog 50 pixels nyob rau hauv qhov siab, uas yog 50% ntawm nws niam txiv keeb.
Vim li cas Feem Pua Heights Poob
Yog tias koj tab tom tsim lub vev xaib, thiab koj muaj ib txoj kab uas koj xav coj mus rau qhov siab ntawm qhov rais, qhov ntuj inclination yog ntxiv rau qhov siab: 100%; rau lub caij ntawd. Tom qab tag nrho, yog tias koj teem lub dav kom dav: 100%; lub caij yuav coj mus rau tag nrho kab rov tav qhov chaw ntawm nplooj, ces qhov siab yuav tsum ua hauj lwm tib yam, txoj cai? Hmoov tsis, qhov no tsis yog qhov teeb meem txhua.
Yuav kom nkag siab tias vim li cas qhov no tshwm sim, koj yuav tsum to taub qhov saib xyuas saib puas pom qhov siab thiab qhov dav. Web browsers ntsuas qhov dav dav dav li qhov kev ua haujlwm ntawm qhov dav qhib qhov rais qhib qhov rai. Yog tias koj tsis muab qhov tseem ceeb dav rau koj cov ntaub ntawv, qhov browser yuav cia li ntim tus txheem kom dav tag nrho ntawm qhov rais (100% qhov dav yog qhov tseeb).
Qhov siab yog xam ntau tshaj qhov dav. Qhov tseeb, browsers tsis ntsuas qhov siab txhua qhov tshwj tsis yog tias cov ntsiab lus ntev li uas nws tawm mus sab nraud ntawm qhov pom kev (yog li tseem yuav tsum tau txav tuav) lossis yog tias tus kws tsim tawm lub xov tooj muaj qhov siab tsis meej rau lub caij rau ntawm nplooj ntawv. Txwv tsis pub, qhov browser tsuas cia cov ntsiab lus ntws hauv qhov dav ntawm qhov kev saib xyuas kom txog rau thaum nws tawm los mus xaus. Qhov siab tsis yog xam txhua yam.
Cov teeb meem tshwm sim thaum koj teeb tsa qhov siab qhov sib npaug ntawm ib qho uas muaj niam / txiv cov ntsiab lus uas tsis muaj qhov siab - ua lwm yam lus, cov niam txiv muaj qhov siab ua ntej: pib; . Koj yog, siv tau, thov qhov browser los laij ib qhov siab los ntawm tus nqi uas tsis muaj nqi. Txij li thaum uas yuav sib npaug zos-qhov nqi, qhov tshwm sim yog qhov browser tsis muaj dab tsi.
Yog tias koj xav teem ib qhov siab ntawm koj cov nplooj ntawv web rau ib feem pua, koj yuav tsum teev qhov siab ntawm txhua tus niam txiv lub npe ntawm qhov koj xav tau qhov siab tau hais tseg. Hauv lwm lo lus, yog tias koj muaj nplooj ntawv zoo li no:
Cov ntsiab lus ntawm no
Koj yuav xav div thiab cov pawg lus nyob rau hauv nws kom muaj 100% qhov siab, tab sis ntawd div tiag muaj ob niam txiv hais:
thiab. Yuav kom txhais tau qhov siab ntawm qhov div rau ib qhov siab, koj yuav tsum teev qhov siab ntawm lub cev thiab html ntsiab thiab.
Yog li koj yuav tsum siv CSS teev lub qhov siab ntawm tsis tsuas div, tab sis kuj lub cev thiab html ntsiab. Qhov no tuaj yeem muaj kev sib tw, txij li thaum koj tuaj yeem cuam tshuam nrog txhua yam uas tau teem rau 100% qhov siab, tsuas yog ua kom tiav qhov kev nyuab siab no.
Qee Yam Uas Yuav Nco Ntsoov Thaum Ua Haujlwm nrog 100% Heights
Tam sim no koj paub tias koj yuav ua li cas thiaj txhim tau qhov siab ntawm koj cov ntsiab lus sab nraud rau 100%, nws tuaj yeem muaj kev lom zem tawm mus thiab ua li ntawd rau tag nrho koj cov nplooj ntawv, tiam sis nws muaj ob peb yam uas koj yuav tsum paub txog:
- Margins thiab padding ntxiv tau ib pob ntawm qhov koj tsis xav tau. Ib qho ntawm ntau yam annoying kuv tau pom nrog ua hauj lwm nrog feem pua heights (thiab widths) yog tias ces lub padding thiab margins ntawm cov tib lub ntsiab yuav ntxiv scroll tuav mus rau sab, txawm tias tag nrho cov ntsiab lus qhia tsis tas yuav tsum scroll tuav. Qhov no yog vim hais tias qhov siab los yog dav ntawm lub caij yog thawj qhov uas yog xam. Ces cov margins thiab paddings ntxiv rau. Yog li ntawd, yog tias koj muaj ib lub caij nrog qhov siab ntawm 100% thiab saum toj thiab hauv qab margins ntawm 10 pixels txhua, yuav muaj ib qho chaw seem rau qhov ntxiv 20 pixels. Nco ntsoov, CSS lub thawv qauv ntxiv npoo, ciam teb, thiab padding mus rau qhov loj ntawm lub caij, yog li 100% nrog ib qho ntawm lwm lub box tus qauv yuav ua tau ntau tshaj 100%.
- Yog tias koj cov ntsiab lus siv ntau dua li qhov siab tshaj hais, nws yuav sau txhua yam tom qab nws. Hauv lwm cov lus, yog tias koj muaj tus qauv tsim muaj ib kem uas yog 80% ntawm qhov siab, thiab cov ntsiab lus nyob hauv nws yuav siv li 100% ntawm qhov siab, tias ntxiv 20% yuav tau qis dua kab thiab ua kom pom kev tsim ntawm koj nplooj ntawv. Yog hais tias muaj cov ntsiab lus hauv kab ntawv ntawd, cov ntawv nyeem tsuas yog sau rau saum nws. Kuv pheej pom qhov no tshwm sim thaum tus kws tsim tawm lub vas sab nws yuam kom siab qhov siab ntawm ib phab thiab tau txais nws ua haujlwm zoo rau kev tso tawm, tab sis thaum cov ntsiab lus ntawm qhov nplooj ntawv hloov yav tom ntej, lawv qhov siab tsis meej lig ntais ntawm cov nplooj ntawv. Qhov no yog twv muaj tseeb thaum koj tabtom tsim cov tsev kawm ntawv lub luag haujlwm uas nws qhov dav thiab qhov siab yuav tsum hloov nrog qhov loj ntawm qhov viewport.
Txhim kho qhov no, koj tuaj yeem teev qhov siab ntawm lub caij thiab. Yog tias koj teem caij rau nws pib, txoj kab tuav txoj hauv kev yuav tshwm sim yog tias lawv xav tau, tiam sis ploj thaum lawv tsis. Tias kho qhov muag pom, tab sis nws ntxiv scrollbars qhov twg koj tsis xav tau lawv.
Siv Qhov Chaw Saib Xyuas
Lwm txoj kev uas koj tuaj yeem siv cov kev sib tw no yog mus sim nrog CSS Viewport Units. Los ntawm kev siv qhov kev saib xyuas qhov siab ntawm kev ntsuas, koj tuaj yeem siv cov ntsiab lus kom siab txog qhov siab ntawm qhov viewport, thiab nws yuav hloov raws li qhov kev hloov pauv hloov! Qhov no yog ib txoj hauv kev zoo kom tau koj qhov siab tshaj 100% ntawm cov nplooj ntawv tiam sis tseem muaj lawv ywj pheej rau ntau yam khoom thiab qhov ntau thiab tsawg.