Վեբ կայքի դիզայնի սովորական հարցն այն է, «ինչպես եք սահմանել տարրերի բարձրությունը մինչեւ 100%»:
Սա կարող է թվալ հեշտ պատասխան: Դուք պարզապես օգտագործում եք CSS- ը տարրը բարձրացնելու համար 100% -ով, բայց դա միշտ չէ, որ այդ տարրը ձգում է ամբողջ բրաուզերի պատուհանի տեղադրելու համար: Եկեք պարզենք, թե ինչու դա տեղի է ունենում եւ ինչ կարող եք անել այս տեսողական ոճին հասնելու համար:
Պիքսելներ եւ տոկոսներ
Երբ դուք սահմանում եք տարրի բարձրությունը, օգտագործելով CSS- ի գույքը եւ արժեքը, որը օգտագործում է պիքսելները, այդ տարրը կունենա այդքան շատ ուղղահայաց տարածք բրաուզերում:
Օրինակ, բարձրությունը `100px; կստանաք 100 պիքսել ուղղահայաց տարածք ձեր նախագծման մեջ: Կարեւոր չէ, թե որքան մեծ է ձեր զննարկիչի պատուհանը, այս տարրը կլինի 100 պիքսել բարձրության վրա:
Տոկոսները տարբեր են, քան պիքսելները: W3C- ի ճշգրտման համաձայն, տոկոսային բարձունքները հաշվարկվում են կոնտեյների բարձրության նկատմամբ: Այսպիսով, եթե դուք բարձրացնում եք պարբերություն `50%; 100px բարձրությամբ div- ի մեջ պարունակությունը կլինի 50 պիքսել բարձրության վրա, ինչը 50% -ից բարձր է:
Ինչու է բարձրանալ բարձունքները
Եթե դուք պատրաստում եք վեբ էջ, եւ դուք ունեք սյունակ, որը ցանկանում եք վերցնել պատուհանի լիարժեք բարձրությունը, բնական հակումն է բարձրությունը ավելացնել `100%; այդ տարրին: Ի վերջո, եթե լայնությունը ընդլայնեք `100%; տարրը վերցնում է էջի ամբողջական հորիզոնական տարածքը, ուստի բարձրությունը պետք է աշխատի նույնը, ճիշտ է: Ցավոք, սա ընդհանրապես չի նշանակում:
Հասկանալ, թե ինչու դա տեղի է ունենում, դուք պետք է հասկանաք, թե ինչպես են բրաուզերները հասկանում բարձրությունը եւ լայնությունը: Վեբ բրաուզերները հաշվարկում են ընդհանուր մատչելի լայնությունը որպես դիտարկիչի պատուհանների լայն բացման գործառույթ: Եթե ձեր փաստաթղթերում որեւէ լայնություն չի սահմանվում, ապա զննարկիչը ավտոմատ կերպով հոսում է բովանդակությունը լրացնելու համար պատուհանի ամբողջ լայնությունը (100% լայնությունը կանխադրված է):
Բարձրությունը գնահատվում է տարբերությամբ, քան լայնությունը: Փաստորեն, բրաուզերները չեն գնահատում բարձրությունը, եթե բովանդակությունը այնքան երկար է, որ այն հեռանում է տեսադաշտից դուրս (այսպիսով պահանջում է ոլորման պարագաներ) կամ եթե վեբ դիզայները բացում է բացարձակ բարձրությունը էջի տարրերի համար: Հակառակ դեպքում, զննարկիչը պարզապես թույլ է տալիս բովանդակության հոսքը տեսադիտի լայնությամբ, մինչեւ վերջ հասնի: Բարձրությունը իրականում չի հաշվարկվում:
Խնդիրներ առաջանում են, երբ դուք սահմանում եք բարձրության բարձրություն այն տարրը, որը պարունակում է ծնողի տարրեր առանց բարձունքների սահմաններում, այլ կերպ ասած, ծնողի տարրերը ունեն լռելյայն բարձրություն. . Դու, ըստ էության, խնդրելով զննարկիչը որոշել առանցքակալված արժեքից բարձրություն: Քանի որ դա հավասար է զրո արժեք, արդյունքը այն է, որ զննարկիչը ոչինչ չի անում:
Եթե ցանկանում եք բարձրացնել ձեր վեբ-էջերի բարձրությունը տոկոսին, դուք պետք է սահմանեք մեկի ցանկացած ծնողի տարրը, որի բարձրությունը որոշված է: Այսինքն, եթե այսպիսի էջ ունեք,
Բովանդակություն այստեղ
Դուք հավանաբար ցանկանում եք div- ի եւ պարբերության մեջ ունենալ 100% բարձրություն, սակայն այդ բաժինը իրականում ունի երկու ծնողի տարրեր.
եւ. Div- ի բարձրությունը հարաբերական բարձրության սահմանման համար պետք է սահմանեք նաեւ մարմնի եւ html տարրերի բարձրությունը:
Այսպիսով, դուք պետք է օգտագործեք CSS- ը ոչ միայն div- ի բարձրությունը սահմանելու համար, այլ նաեւ մարմնի եւ HTML- ի տարրերը: Դա կարող է լինել մարտահրավեր, քանի որ դուք կարող եք արագորեն ճնշվել ամեն ինչի վրա, որը սահմանվում է 100% բարձրության վրա, միայն այդ ցանկալի արդյունքի հասնելու համար:
Որոշ գործեր, որոնք նշվում են 100% բարձրության վրա աշխատելու ժամանակ
Այժմ, երբ դուք գիտեք, թե ինչպես եք սահմանել ձեր էջի տարրերի բարձրությունը մինչեւ 100%, կարող է հետաքրքիր լինել դուրս գալ եւ դա անել ձեր բոլոր էջերում, բայց կա մի քանի բան, որ դուք պետք է տեղյակ լինեք.
- Ծալքավորները եւ լիցքավորումը կարող են ավելացնել գութան, որտեղ դուք չեք ցանկանում: Հետաքրքիր բաներից մեկը, որ ես գտել եմ տոկոսային բարձունքների հետ (եւ լայնություններ), այն է, որ այդ նույն տարրերի լցնում եւ ծածանները կարող են էջի վրա ոլորման բլոկներ ավելացնել, թեեւ բոլոր բովանդակությունը ցուցադրվում է առանց ոլորման շերտերի կարիք: Դա այն է, որ տարրի բարձրությունը կամ լայնությունը առաջինն է, որը հաշվարկվում է: Այնուհետեւ ավելացվում են ծայրամասերը եւ ծածկույթները: Այսպիսով, եթե դուք ունեք 100% բարձրություն ունեցող մի տարր եւ յուրաքանչյուր 10 պիքսելների վերին եւ ստորին եզրագծերը, ապա լրացուցիչ 20 պիքսելի համար գունավոր գիծ կլինի: Հիշեք, CSS տուփի մոդելը ավելացնում է շերտը, սահմանը եւ լրացնում է տարրերի չափսը, ուստի 100% -ով այս մյուս տուփի մոդելի արժեքներից որեւէ մեկը 100% -ից ավելի կլինի:
- Եթե ձեր բովանդակությունը տեւում է ավելի բարձր, քան սահմանված բարձրությունը, այն կվերանվանվի այն բանից հետո, երբ դրանից հետո: Այլ կերպ ասած, եթե դուք ունեք դիզայն, որն ունի 80% բարձրություն ունեցող սյունակ, եւ այն բովանդակությունը, որը ներսում է, կպահանջի բարձրության 100% -ը, որ լրացուցիչ 20% -ը կշարունակի ստորեւ սյունակը եւ կոտրել տեսողական դիզայնը ձեր էջի մասին: Եթե սյունակում ստորեւ բովանդակություն կա, ապա տեքստը պարզապես գրելու է վերեւում: Ես հաճախ դա տեսնում եմ, երբ վեբ դիզայները փորձում է ստիպել ուժեղացնել էջի բարձրությունը եւ ստանալ այն լավ աշխատելու համար, բայց երբ այդ էջի բովանդակությունը փոփոխվում է ապագայում, դրանց բացարձակ բարձունքները լիովին կոտրում են էջի հոսքը: Սա կրկնակի ճշմարիտ է, երբ դուք ստեղծում եք արձագանքող կայքեր, որոնց լայնությունը եւ բարձրությունը պետք է փոխվի տեսադաշտի չափով:
Դրա ուղղելու համար դուք կարող եք սահմանել նաեւ տարրի բարձրությունը: Եթե այն կարգավորեք ավտոմատ, գոտիները կհայտնվեն, եթե դրանք անհրաժեշտ են, բայց անհետանում են, երբ դրանք չեն: Այն ամրագրում է տեսողական ընդմիջումը, սակայն այն ավելացնում է գոլորշիների հատվածները, որտեղ դուք չեք ցանկանում դրանք:
Օգտագործելով Viewport միավորները
Այս մարտահրավերներից մեկը կարող եք հաղթահարել մեկ այլ տարբերակ, փորձելով CSS Viewport միավորների հետ: Տեսափորային բարձրության չափման միավոր օգտագործելով, դուք կարող եք չափել տարրեր, որպեսզի տեսանելի տեսքի բարձրությունը վերցվի, եւ այն կփոխվի, քանի որ տեսադաշտը փոխվում է: Սա 100% բարձրության տեսողական պատկերներ էջի վրա ստանալու մեծ ճանապարհ է, սակայն դրանք դեռեւս ճկուն են տարբեր սարքերի եւ էկրանների չափսերի համար: