Potso e atisang ho botsoa moqapong oa marang-rang ke "u beha bophahamo ba karolo ea 100%" joang?
Sena se ka bonahala eka ke karabo e bonolo. U mpa u sebelisa CSS ho beha bolelele ba karolo ea 100%, empa sena hase kamehla se otlollang ntlha eo ho lumellana le fensetere eohle ea sebapali. A re fumane hore na ke hobane'ng ha sena se etsahala le seo u ka se etsang ho finyella mokhoa ona oa pono.
Pixels le Liphesente
Ha o hlalosa bophahamo ba ntho e sebelisang thepa ea CSS le boleng bo sebelisang pixels, ntlha eo e tla nka sebaka se lekaneng haholo sa sebapali.
Ka mohlala, serapa le bolelele: 100px; e tla nka li-pixels tse 100 tsa sebaka se otlolohileng moqapi oa hau. Ha ho tsotellehe hore na fensetere ea hau ea sebapali ke e kholo hakae, ntlha ena e tla ba bophahamo ba pixelisi tse 100.
Liphesente li sebetsa ka tsela e sa tšoaneng ho feta li-pixels. Ho ea ka sebopeho sa W3C, libaka tsa phaello ea palo li baloa mabapi le bophahamo ba setshelo. Kahoo haeba u beha serapa ka bolelele: 50%; ka hare ho div le bophahamo ba 100px, serapa se tla ba bophahamo ba pixelse tse 50, e leng karolo ea 50% ea motsoako oa motsoali.
Ke Hobane'ng ha Lithaba Tsa Liphesente li hlōleha
Haeba u ntse u qapa leqephe la websaete, 'me u na le kholumo eo u ka ratang ho e nka ka bophahamo ba fensetere, tšekamelo ea tlhaho ke ho eketsa bophahamo: 100%; ho ntlha eo. Etsoe, haeba u beha bophara ho bophara: 100%; the element e tla nka sebaka se feletseng sa leqephe, kahoo bolelele bo lokela ho sebetsa se le seng, na? Ka bomalimabe, sena ha se joalo.
Ho utloisisa hore na ke hobane'ng ha sena se etsahala, u tlameha ho utloisisa hore na li-browsers li hlalosa bophahamo le bophara joang. Liwebsaete tsa marang-rang li lekanya bophara ba teng bo fumanehang ho sebetsa kamoo fensetere ea sebapali e bulehileng kateng. Haeba u sa behe litekanyetso tsa bophara bo bongata litokomaneng tsa hau, sebapali se tla potoloha se ka hare ho tlatsa bophara bohle ba fensetere (100% bophara ke ea kamehla).
Bohlokoa ba bophahamo bo baloa ho fapana le bophara. Ha e le hantle, li-browsers ha li hlahlobe bophahamo ho hang ntle le hore litaba li le telele hoo li ka ntle ho ponahalo (kahoo e hlokang mekoallo ea moqolo) kapa haeba web designer e beha bophahamo bo feletseng bakeng sa karolo e leqepheng. Ho seng joalo, sebapali se lumella hore litaba li phalle ka har'a bophara ba pono ho fihlela qetellong. Bophahamo ha boa balloa ho hang.
Mathata a hlaha ha u beha bophahamo ba liphesente ho karolo e nang le likarolo tsa motsoali ntle le litšiea tse behiloeng - ka mantsoe a mang, likarolo tsa motsoali li na le bophahamo bo sa feleng: koloi; . Ha e le hantle, u kopa sebapali ho bala sebaka se phahameng ho tloha ho sa bohlokoa. Kaha seo se ne se tla lekanngoa le boleng ba boleng, phello ke hore sebapali ha se etse letho.
Haeba o batla ho beha bophahamo ho maqephe a hau a marang-rang ho karolo ea palo, o tlameha ho beha bophahamo ba karolo e 'ngoe le e' ngoe ea motsoali ea eo u batlang bophahamo bo hlalositsoeng. Ka mantsoe a mang, haeba u na le leqephe le kang lena:
Tlhaloso mona
Mohlomong u batla div le serapa ho eona ho ba le bophahamo ba 100%, empa div eo e na le lintlha tse peli tsa motsoali:
le. E le hore u hlalose bolelele ba div ho fihlela bophahamo bo lekanyelitsoeng, u tlameha ho beha bophahamo ba 'mele le lihlopha tsa html hape.
Kahoo u tla hloka ho sebelisa CSS ho beha bophahamo ba div, empa hape le 'mele le html likarolo. Sena e ka ba phephetso, kaha u ka potlakela ho imeloa ke ntho e 'ngoe le e' ngoe e behiloeng ho 100% bophahamong, feela ho finyella phello ena e lakatsehang.
Lintho Tse Ling Tse Lokelang ho Hlokomeloa Ha u sebetsa le 100% Heights
Hona joale kaha u tseba ho beha bophahamo ba likarolo tsa leqephe la hau ho 100%, ho ka ba monate ho tsoa le ho etsa joalo maqepheng ohle a hau, empa ho na le lintho tse seng kae tseo u lokelang ho li hlokomela:
- Margins le padding li ka eketsa mohala oa moqolo oo u sa batleng oona. E 'ngoe ea lintho tse nyarosang ka ho fetisisa tseo ke li fumaneng ka ho sebetsa ka bophahamo ba liphesente (le bophara) ke hore joale marang-rang le marang-rang ho lintlheng tse tšoanang li ka eketsa mekoti ea moqolo leqepheng, le hoja litaba tsohle li bonts'a ntle le ho hloka melapo ea meqolo. Lebaka ke hore bophahamo kapa bophara ba ntlha ke ntho ea pele e balang. Ka nako eo mabitla le marang-rang a kenngoa. Kahoo haeba u e-na le ntlha e nang le bophahamo ba 100% le marang-rang a holimo le a tlase a pixelse tse 10 ka 'ngoe, ho tla ba le sebaka sa moqolo bakeng sa pixelse tse 20. Hopola, CSS lebokose mohlala o eketsa margin, moeli, le padding ka boholo ba ntho e itseng, kahoo 100% le leha e le efe ea lihlopha tse ling tsa lebokose la mefuta e tla ba ho feta 100%.
- Haeba dikahare tsa hau di nka ho feta ditshwantsho tse hlalositsoeng, e tla ngolosa letho ka mor'a lona. Ka mantsoe a mang, haeba u na le moralo o nang le mohala o ka bang 80% bophahamong, 'me litaba tse ka hare ho tsona li tla nka bophahamo ba 100%, e le hore 20% e tla tsoela pele ka tlase ho khoeli ebe e robeha pono ea leqephe la hau. Haeba ho na le dikahare tse ka tlase ho lengolo leo, mongolo o tla ngola feela ka holim'a eona. Ke atisa ho bona sena se etsahala ha moetsi oa marang-rang a leka ho qobella bolelele ba leqephe mme o etsa hore e sebetse ka ho phethahetseng bakeng sa ho qala, empa ha litaba tse leqepheng leo li fetoha nakong e tlang, litlhōrō tsa bona tse phahameng li senya ho phalla ha leqephe. Sena ke nnete ha u ntse u haha liwebsaete tse amohelehang tseo bophara le bophahamo ba tsona li lokelang ho fetoha ka boholo ba ponts'oa.
Ho lokisa sena, u ka beha bophahamo ba ntlha. Haeba u e beha ka koloi, mochini oa meqolo o tla hlaha haeba o hlokeha empa o nyamela ha ba sa le joalo. Seo se lokisa pono ea ho senya, empa e eketsa scrollbars moo u ka 'nang ua se batle.
Ho sebelisa litekanyetso tsa boipheliso
Tsela e 'ngoe eo u ka sebetsanang le phephetso ena ka eona ke ho leka litebelisoa tsa CSS Viewport. Ka ho sebelisa litebelisoa tsa bolelele ba tekanyo ea litekanyetso, o ka lekanisa likarolo tsa ho nka bophahamo bo hlalositsoeng ba pono, 'me seo se tla fetoha ha liphetoho li fetoha! Ena ke tsela e ntle ea ho etsa hore palo ea hau ea 100% e phahamisoe maqepheng empa e sa ntse e e-na le eona e lumellane le lisebelisoa tse fapaneng le boholo ba lichelete.