Ինչպե՞ս է ստացվում, որ height-ի համար տոկոսային արժեքը չի աշխատում, բայց width-ի տոկոսային արժեքը գործում է:
<div id="working"></div>
<div id="not-working"></div>
#working{
width:80%;
height:140px;
background:orange;
}
#not-working{
width:80%;
height:30%;
background:green;
}
#working-ի լայնությունն ավարտվում է տեսադաշտի 80%-ով, բայց #not-working-ի բարձրությունը՝ 0:
height հատկության պարզ և պարզ բացատրությունը տոկոսային արժեքներով. stackoverflow.com/a/31728799/3597276 25.08.2015 Բլոկի տարրի բարձրությունը կանխադրված է բլոկի բովանդակության բարձրության վրա: Այսպիսով, հաշվի առնելով նման բան.
<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>
#inner-ը կմեծանա այնքան բարձր՝ պարբերությունը պարունակելու համար, իսկ #outer-ը այնքան բարձր կլինի՝ պարունակելու #inner_ը:
Երբ դուք նշում եք բարձրությունը կամ լայնությունը որպես տոկոս, դա տոկոս է տարրի ծնողի նկատմամբ: Լայնության դեպքում բոլոր բլոկների տարրերը, եթե այլ բան նշված չէ, այնքան լայն են, որքան իրենց մայրը մինչև <html>; Այսպիսով, բլոկի տարրի լայնությունը անկախ է դրա բովանդակությունից, և width: 50% ասելով ստացվում է պիքսելների լավ սահմանված քանակ:
Այնուամենայնիվ, բլոկի տարրի բարձրությունը կախված է դրա բովանդակությունից, եթե չնշեք որոշակի բարձրություն: Այսպիսով, ծնողի և երեխայի միջև կա հետադարձ կապ, երբ խոսքը վերաբերում է բարձրությանը, և height: 50% ասելը չի տալիս լավ սահմանված արժեք, քանի դեռ դուք չեք խախտում հետադարձ կապի օղակը՝ ծնող տարրին տալով որոշակի բարձրություն:
height հատկության տոկոսային արժեքը մի փոքր բարդություն ունի, և width և height հատկությունները իրականում տարբեր կերպ են վարվում միմյանց նկատմամբ: Թույլ տվեք ձեզ տանել շրջագայության՝ ըստ տեխնիկական բնութագրերի:
height սեփականություն:Եկեք նայենք թե ինչ է ասում CSS Snapshot 2010-ի առանձնահատկությունը height-ի մասին:
Տոկոսը հաշվարկվում է գեներացված տուփի պարունակող բլոկի բարձրության նկատմամբ: Եթե պարունակող բլոկի բարձրությունը հստակորեն նշված չէ (այսինքն, դա կախված է բովանդակության բարձրությունից), և այս տարրը բացարձակապես տեղադրված չէ, արժեքը հաշվարկվում է «ավտո»: Արմատային տարրի տոկոսային բարձրությունը հարաբերական է սկզբնական պարունակող բլոկին: Ծանոթագրություն. Բացարձակապես տեղակայված տարրերի համար, որոնց պարունակող բլոկը հիմնված է բլոկի մակարդակի տարրի վրա, տոկոսը հաշվարկվում է այդ տարրի լիցքավորման տուփի բարձրության նկատմամբ:
Լավ, եկեք դա առանձնացնենք քայլ առ քայլ.
Տոկոսը հաշվարկվում է գեներացված տուփի պարունակող բլոկի բարձրության նկատմամբ:
Ի՞նչ է պարունակող բլոկը: Դա մի քիչ բարդ է, բայց նորմալ տարրի համար լռելյայն static դիրքում, դա հետևյալն է.
մոտակա բլոկային կոնտեյների նախնիների տուփը
կամ անգլերեն՝ դրա մայր տուփը։ (Արժե իմանալ, թե ինչ կլինի նաև fixed և absolute դիրքերի համար, բայց ես անտեսում եմ դա՝ այս պատասխանը կարճ պահելու համար:)
Այսպիսով, վերցրեք այս երկու օրինակները.
<div id="a" style="width: 100px; height: 200px; background-color: orange">
<div id="aa" style="width: 100px; height: 50%; background-color: blue"></div>
</div><div id="b" style="width: 100px; background-color: orange">
<div id="bb" style="width: 100px; height: 50%; background-color: blue"></div>
</div>Այս օրինակում #aa-ի պարունակող բլոկը #a է, և այդպես շարունակ #b-ի և #bb-ի համար: Առայժմ այնքան լավ:
height-ի բնութագրի հաջորդ նախադասությունը այն բարդությունն է, որը ես նշեցի այս պատասխանի ներածությունում.
Եթե պարունակող բլոկի բարձրությունը պարզապես նշված չէ (այսինքն, դա կախված է բովանդակության բարձրությունից), և այս տարրը բացարձակապես տեղադրված չէ, արժեքը հաշվարկվում է որպես «ավտո» .
Ահա՜ Արդյոք պարունակող բլոկի բարձրությունը հստակորեն նշված է, կարևոր է:
height:200px-ի 50%-ը #aa-ի դեպքում 100px էheight:auto-ի 50%-ը auto է, ինչը 0px է #bb-ի դեպքում, քանի որ auto-ի համար բովանդակություն չկա, որպեսզի ընդլայնվի մինչևԻնչպես ասվում է սպեցիֆիկացիայի մեջ, կարևոր է նաև՝ պարունակող բլոկը բացարձակապես տեղադրված է եղել, թե ոչ, բայց եկեք անցնենք widthին:
width սեփականություն:Այսպիսով, դա նույն կերպ է աշխատում width-ի դեպքում: Եկեք նայենք սպասարկմանը:
Տոկոսը հաշվարկվում է առաջացած տուփի պարունակող բլոկի լայնության նկատմամբ:
Նայեք այս ծանոթ օրինակներին, որոնք փոխվել են նախորդից՝ width-ի փոխարեն height-ի փոխարեն:
<div id="c" style="width: 200px; height: 100px; background-color: orange">
<div id="cc" style="width: 50%; height: 100px; background-color: blue"></div>
</div><div id="d" style=" height: 100px; background-color: orange">
<div id="dd" style="width: 50%; height: 100px; background-color: blue"></div>
</div>width:200px-ի 50%-ը #cc-ի դեպքում 100px էwidth:auto-ի 50%-ը 50%-ն է այն ամենի, ինչ width:auto ավարտվում է, ի տարբերություն heightի՝ չկա որևէ հատուկ կանոն, որը այլ կերպ վերաբերվում է այս գործին:Հիմա, ահա բարդ մասնիկը. auto նշանակում է տարբեր բաներ՝ մասամբ կախված նրանից, թե արդյոք այն նշված է width, թե height համար: height-ի համար դա պարզապես նշանակում էր բովանդակության համար անհրաժեշտ բարձրություն*, բայց width-ի համար auto-ն իրականում ավելի բարդ է: Կոդի հատվածից կարող եք տեսնել, որ այս դեպքում այն ավարտվել է դիտակետի լայնությամբ:
Ի՞նչ է ասում սպասարկումը լայնության ավտոմատ արժեքի մասին:
Լայնությունը կախված է այլ հատկությունների արժեքներից: Տես ստորև բերված բաժինները:
Ուայ, դա օգտակար չէ: Ձեզ դժվարություններից փրկելու համար ես ձեզ գտա մեր օգտագործման դեպքի համապատասխան բաժինը, որը վերնագրված է «հաշվարկել լայնությունները և լուսանցքները», ենթագրերով "բլոկի մակարդակի, չփոխարինված տարրեր նորմալ հոսքում":
Հետևյալ սահմանափակումները պետք է պահպանվեն այլ հատկությունների օգտագործված արժեքների միջև.
'lawer-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = պարունակող բլոկի լայնությունը
Լավ, այնպես որ width գումարած համապատասխան լուսանցքը, եզրագիծը և լիցքավորման եզրագծերը պետք է գումարվեն պարունակող բլոկի լայնությանը (չի իջնում, ինչպես աշխատում է heightը): Եվս մեկ հատուկ նախադասություն.
Եթե «լայնությունը» դրված է «ավտո», ապա ցանկացած այլ «ավտո» արժեք դառնում է «0», իսկ «լայնությունը» բխում է ստացված հավասարությունից:
Ահա՜ Այսպիսով, այս դեպքում width:auto-ի 50%-ը տեսադաշտի 50%-ն է: Հուսանք, որ ամեն ինչ վերջապես իմաստ ունի հիմա:
Ծանոթագրություններ
* Համենայն դեպս, որքանով դա կարևոր է այս դեպքում: spec Լավ, հիմա ամեն ինչ մի տեսակ իմաստ ունի:
% բարձրությունը սահմանելը, նույնիսկ այն դեպքում, երբ ծնողի վրա բացահայտորեն նշված բարձրություն չկա: Ես նկատի ունեմ, որ երբ դուք ունեք ճկուն կոնտեյներ, ֆլեքս տարրեր և ներքին դիվ ֆլեքս տարրի ներսում. երբ դուք բարձրությունը սահմանում եք %-ով այդ ներքին դիվի վրա, այն ժառանգում է բարձրությունը ճկուն երեխայից (կարևոր չէ, որ ճկուն տարրի բարձրությունը սահմանվում է auto): . 28.11.2017 Կարծում եմ, դուք պարզապես պետք է դրան մայր կոնտեյներ տաք... նույնիսկ եթե այդ տարայի բարձրությունը որոշված է տոկոսներով: Սա շատ լավ է աշխատում. JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 50%;
}
Դրան պետք է բարձրությամբ տարա տալ։ width-ն օգտագործում է դիտակետը որպես լռելյայն լայնություն
Մեկ այլ տարբերակ div-ին ոճ ավելացնելն է
<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
//to be scrolled
</div>
Եվ դա նշանակում է, որ տարրը տեղակայված է մոտակա դիրքավորված նախահայրի համեմատ:
Առանց բովանդակության, բարձրությունը արժեք չունի տոկոսը հաշվարկելու համար: Լայնությունը, այնուամենայնիվ, կվերցնի DOM-ի տոկոսը, եթե ծնողը նշված չէ: (Օգտվելով ձեր օրինակից) Երկրորդ div-ը առաջին div-ի ներսում դնելը արդյունք կբերեր... ստորև բերված օրինակը...
<div id="working">
<div id="not-working"></div>
</div>
Երկրորդ div-ը կկազմի առաջին div-ի բարձրության 30%-ը:
vwմիավորով փոխարինելու հարցում, քանի որ դա իսկապես կդժվարացնի ձեր կյանքը, եթե որոշեք տարրը դնել մեկ այլ տարայի մեջ: 16.12.2016