Me paraqitjen e bllokut, shpesh kërkohet bëni lartësinë e bllokut div 100%... Tregim i thjeshtë lartësia = 100% v div nuk do të jetë e mundur të arrihet rezultati i dëshiruar, kështu që ekziston një teknikë e caktuar, për të cilën do të flas në këtë artikull.

Para se të jap kodin, unë do të shpjegoj se si funksionon. Thelbi i saj është të tregojë lartësia = 100% për të gjitha blloqet mëmë, duke përfshirë, dhe html... Për shembull, ky kod ju lejon të bëni div me lartësi 100%:

Si rezultat, të dyja divs do të jenë 100% të larta... Ju lutemi vini re se nëse hiqni nga lartësia html 100%, atëherë asgjë nuk do të vijë prej saj. Në mënyrë të ngjashme, nëse në krye div largohem lartësia 100%, dhe lëre të brendshmen, atëherë e brendshme nuk do të jetë me 100% lartësia. Kjo do të thotë, mbani mend bëni një div me lartësi 100%, çdo bllok prind gjithashtu duhet të bëhet me lartësi 100%..

Nëse keni ende ndonjë pyetje, ose keni dëshirë të komentoni për këtë artikull, atëherë mund të lini komentin tuaj në fund të faqes.

Komentet (6):

03.05.2013 20:37:02

Michael, bëri të njëjtën gjë si ju, por kur zgjatni bllokun qendror, blloku i djathtë nuk rritet

Përgjigju

03.05.2013 21:55:51

Mahail! Provova metodën e propozuar - funksionon, por me paralajmërimin që blloqet e div të cilave është vendosur lartësia në 100% nuk ​​duhet të jenë më të mëdha se dritarja e shfletuesit. Nëse blloku nuk përshtatet në lartësi në dritaren e shfletuesit, atëherë blloku nuk do të ngjyroset plotësisht me ngjyrën e sfondit. Vetëm pjesa e bllokut që përshtatet në dritaren e shfletuesit do të pikturohet me një ngjyrë të sfondit. Këtu është kodi për një shembull.

stili i tekstit css (4)

Pa përmbajtje, lartësia nuk ka rëndësi për llogaritjen e përqindjes. Megjithatë, gjerësia do të marrë një përqindje të DOM nëse nuk specifikohet asnjë prind. (Duke përdorur shembullin tuaj) Vendosja e ndarjes së dytë brenda ndarjes së parë do të merrte rezultatin ... shembulli më poshtë ...

Divja e dytë do të jetë 30% e lartësisë së ndarjes së parë.

Pse nuk funksionon përqindja për lartësinë, por përqindja për gjerësinë?

Gjerësia #working është 80% e pamjes së pamjes, por lartësia # që nuk funksionon përfundon në 0.

Duhet t'i jepni një enë me lartësi. gjerësia përdor portin e shikimit si gjerësi të paracaktuar

Një tjetër mundësi është të shtoni stil në div

Dhe kjo do të thotë që elementi ndodhet në lidhje me paraardhësin më të afërt të vendosur.

Përqindja në vetinë e lartësisë ka një ndërlikim të lehtë dhe vetitë e gjerësisë dhe lartësisë në fakt sillen ndryshe me njëra-tjetrën. Më lejoni t'ju çoj në një turne të specifikimeve.

lartësia:

që përmban gjeneruar bllokoj... Nëse lartësia e bllokut që përmban nuk është specifikuar në mënyrë eksplicite (dmth. varet nga lartësia e përmbajtjes) dhe elementi nuk është absolutisht i pozicionuar, vlera vlerësohet në "auto". Lartësia e përqindjes në elementin rrënjë në lidhje me blloku fillestar që përmban... Shënim. Për elementët e pozicionuar absolutisht, që përmbajnë një bllok të bazuar në një element në nivel blloku, përqindja llogaritet në lidhje me lartësinë e kutisë së mbushjes së atij elementi.

Ok, le ta bëjmë hap pas hapi:

Përqindja llogaritet në lidhje me lartësinë e bllokut, që përmban gjeneruar bllokoj .

Përqindja llogaritet në bazë të gjerësisë së bllokut të bllokut të gjeneruar.

Hidhini një sy këtyre shembujve të njohur, të modifikuar nga ai i mëparshmi për të ndryshuar gjerësinë në vend të lartësisë:

• 50% gjerësi: 200px 200px - 100px në rastin e #cc
• Gjerësia 50%: auto është 50% e çdo gjerësie: përfundon automatike, ndryshe nga lartësia, nuk ka asnjë rregull të veçantë që e trajton këtë rast ndryshe.

Tani këtu është pjesa e ndërlikuar: auto do të thotë gjëra të ndryshme në varësi të faktit nëse është specifikuar për gjerësi apo lartësi! Për lartësinë do të thotë vetëm lartësia e nevojshme për t'iu përshtatur përmbajtjes *, por për gjerësinë automatike është në fakt më e ndërlikuar. Ju mund të shihni nga pjesa e kodit, e cila në këtë rast doli të ishte gjerësia e portit të shikimit.

Gjerësia varet nga vlerat e pronave të tjera. Shihni seksionet më poshtë.

Wai, kjo nuk është e dobishme. Për t'ju shpëtuar nga telashet, ju gjeta një seksion përkatës në rastin tonë të përdorimit të titulluar Llogaritja e gjerësisë dhe kufijve, me nëntitull "elementë të pandryshueshëm në rrjedhën normale në nivel blloku":

Vlerat e pronave të tjera të përdorura duhet të përfshijnë kufizimet e mëposhtme:

"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-djathtas" = gjerësia e bllokut që përmban

OK, kështu që gjerësia plus kufijtë, kufijtë dhe kufijtë e mbushjes duhet të shtohen deri në gjerësinë e bllokut që përmban (a jo pasardhësit, si funksionon lartësia). Një sugjerim tjetër:

Nëse "width" është vendosur në "auto", çdo vlerë tjetër "auto" bëhet "0" dhe "width" vjen nga barazia që rezulton.

Aha! Pra, në këtë rast, 50% gjerësi: auto është 50% e pamjes. Shpresoj që gjithçka më në fund të ketë kuptim tani!

* Të paktën sa e rëndësishme është në këtë rast. spec Ok, tani gjithçka ka kuptim.

Përshkrim

Vendos lartësinë maksimale të një elementi. Vlera e lartësisë së elementit do të llogaritet bazuar në vlerat e veçorive të lartësisë, lartësisë maksimale dhe lartësisë min. Tabela Figura 1 tregon se si udhëzohet shfletuesi kur përdor karakteristikat e stilit të specifikuar së bashku.

Të dhënat nga tabela duhet të kuptohen si më poshtë. Nëse vlera e lartësisë është më e madhe se vlera max-height, atëherë lartësia e elementit supozohet të jetë e barabartë me vlerën max-height.

Sintaksë

lartësia maksimale: vlera | interesi | asnjë | trashëgojnë

vlerat

Piksele (px), përqindjet (%) dhe njësi të tjera matëse të pranuara në CSS pranohen si vlera. Vlerat negative nuk lejohen.

Asnjë Nuk e anulon këtë pronë. inherit Trashëgon vlerën nga prindi.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. një.

Oriz. 1. Rezultati i përdorimit të vetive max-height

Modeli i objektit

document.getElementById ("elementID") .style.maxHeight

Shfletuesit

Internet Explorer deri dhe duke përfshirë versionin 7.0 nuk e mbështet vlerën trashëgimore.