Вэбсайт дизайны талаар байнга асуудаг асуулт бол "элементийн өндрийг 100% хүртэл хэрхэн тогтоох вэ?"
Энэ нь хялбар хариулт мэт санагдаж болох юм. Та ердөө л элементийн өндрийг 100% -тай болгохын тулд CSS ашигладаг, гэхдээ энэ нь бүхэл браузерын цонхонд тохирох элементийг үргэлж сунгахгүй. Яагаад энэ зүйл тохиолдож байгааг олж мэдээд, энэ үзүүлэнт байдалд хүрэхийн тулд юу хийж чадахыг олж мэдье.
Зураг ба Хувь
CSS элементийг ашиглан элементийн өндрийг тодорхойлж, пикселийг ашигладаг утга нь тухайн элемент нь браузерт босоо зайг эзэлнэ.
Жишээ нь өндөртэй догол мөр: 100px; босоо зайд 100 пиксел босгох болно. Хөтөчийн цонх хэр их байх тусам энэ элемент нь 100 пиксел өндөр байх болно.
Хувь пикселээс ялгаатай байна. W3C стандартын дагуу савны өндөртэй харьцангуй өндрийн хэмжээг тооцно. Хэрвээ та өндөртэй догол мөрийг тавьвал: 50%; 100px өндөртэй портын дотор догол мөр нь өндрийн 50 пиксел байх бөгөөд түүний 50 хувийг parent element гэнэ.
Яагаад Хуваарьт Heights Heights яагаад болохгүй байна
Хэрэв та вэб хуудсыг зохиож байгаа бөгөөд цонхны бүрэн өндөртэй багана авах хүсэлтэй байгаа бол байгалийн сонирхол нь өндрөө нэмнэ: 100%; тэр элементэд. Эцсийн эцэст, өргөнийг өргөн бол: 100%; элемент нь хуудасны бүрэн хэвтээ зайг эзэлдэг тул өндөр нь ижилхэн ажиллана, тийм үү? Харамсалтай нь энэ нь огт хамаагүй.
Яагаад ийм байдгийг ойлгохын тулд хөтөч хэрхэн өндөр, өргөнийг тайлбарлахыг ойлгох ёстой. Вэб хөтөч цонхнуудын өргөн хүрээг хамарсан функцын нийт өргөнийг тооцдог. Хэрэв та өөрийн документ дээр ямар ч өргөн утгыг тавьдаггүй бол хөтөч нь цонхны нийт өргөнийг дүүргэхийн тулд агуулгыг автоматаар дамжуулна (100% өргөн нь анхдагч байна).
Өндөр үнэ нь өргөнөөсөө өөрөөр тооцоологддог. Үнэн хэрэгтээ, хөтөч нь үзэл бодол нь удаан хугацааны туршид үзэл бодлоо илэрхийлэхгүй бөгөөд хэрвээ вэбсайт зохиогч нь хуудасны элементийн үнэмлэхүй өндрийг тохируулсан бол үзэсгэлэнгийн газрын гаднах хугацааг хэтрэх ёсгүй. Өөрөөр хэлбэл, хөтөч нь үзэл бодлын өргөнийг доторх төгсгөл хүртэлх агуулгын урсгалыг зүгээр л явуулна. Өндөр нь үнэндээ тооцоологддоггүй.
Тодруулалгүй толгой элементийн элемент дээр хувийн өндрийг тогтоох үед асуудал гардаг - Өөрөөр хэлбэл, толгой элементүүд нь өндөр: auto; . Үүний үр дүнд хөтөчийг тодорхойгүй утгаас өндрийг тооцоолохыг хүсч байна. Энэ нь null-value-тэй тэнцүү болохоор үр дүн нь хөтөч юу ч хийхгүй байх явдал юм.
Хэрвээ та вэб хуудсуудаа өндөрт тохируулахыг хүсч байвал өндрийг хүссэн өндрийг нь тохируулах хэрэгтэй. Өөрөөр хэлбэл та иймэрхүү хуудастай бол:
Агуулга
Та div ба түүний догол мөрийг 100% өндөртэй байлгахыг хүсч байгаа бололтой, гэхдээ тэр div нь хоёр үндсэн элементтэй:
болон. Дивын өндрийг харьцангуй өндрийг тодорхойлохын тулд та биеийн өндрийг болон html элементийг тохируулах ёстой.
Тиймээс та CSS-ийг ашиглахын тулд CSS-ийг ашиглах хэрэгтэй. Гэхдээ бие болон html элементүүдийг ашиглах хэрэгтэй. Хэрэв та хүссэн үр дүндээ хүрэхийн тулд 100% -ийн өндрийг тохируулсан бүх зүйл дээр түргэн шуурхай авч чадна.
100% давхрагад ажиллахад зарим зүйлийг анхаарах хэрэгтэй
Одоо та хуудасны элементүүдийнхээ өндрийг 100% хэрхэн тохируулахыг мэдэж байгаа болохоор хуудасныхаа элементүүдийг бүх хуудсанд тавина, гэхдээ та дараах зүйлсийг мэдэж байх хэрэгтэй:
- Үүний хажуу тал ба дэвсгэрлэл нь та хүсэхгүй байгаа гүйлгэх зургийг нэмж болно. Миний олж мэдсэн хамгийн хэцүү зүйлсийн нэг нь өндөр (ба өргөн )тэй ажиллаж байгаагийн илрэл бөгөөд энэ нь элементүүд нь гүйлгэх баар нэмж болох бөгөөд бүх агуулгууд нь гүйлгэх баар шаардлагагүй ч гэсэн харуулдаг. Энэ нь элементийн өндөр буюу өргөнийг тооцоолох хамгийн эхний зүйл юм. Дараа нь захын болон талбайнуудыг нэмнэ. Тэгэхээр та 100% -ийн өндөртэй, 10 пикселийн дээд ба доод эгнээтэй элементтэй бол нэмэлт 20 пикселийн хувьд гүйлгэх баар байх болно. CSS хайрцагны загвар нь элементийн хэмжээн дээр хил, хонгил, нягтралыг нэмдэг гэдгийг санаарай, тиймээс 100% бусад хайрцагны загварын утгууд нь 100% -аас их байх болно гэдгийг санаарай.
- Хэрвээ таны агуулга тодорхойлсон өндрөөсөө их бол энэ нь дараа нь дарж бичих болно. Өөрөөр хэлбэл хэрэв та өндрийн 80% -тай багана бүхий дизайнтай бол түүний доторх контент нь 100% -ийн өндөртэй байх бөгөөд нэмэлт 20% нь баганаас доош үргэлжлэн харааны загварыг эвдэнэ Таны хуудас. Хэрвээ тухайн баганаас доош агуулга байвал текст нь зүгээр л дээр нь бичнэ. Вэб дизайнер нь хуудасны өндрийг хүчээр ажиллуулахыг хичээдэг бөгөөд үүнийг амжилттай ажиллуулахыг хичээдэг боловч энэ хуудсан дахь агуулга нь ирээдүйд өөрчлөгдөх үед үнэмлэхүй өндөр нь хуудсын урсгалыг бүрэн эвддэг. Та өргөн дэлгэц, өндрөө viewport-ийн хэмжээгээр өөрчлөх шаардлагатай вэбсайтуудыг бий болгоход энэ нь хоёр дахин их байдаг.
Үүнийг засахын тулд та элементийн өндөрийг тохируулж болно. Хэрэв та үүнийг автоматаар тохируулбал тэдгээрийг шаардлагатай үед харуулах баар харагдах боловч үгүй бол алга болно. Энэ нь харааны завсарыг засдаг, гэхдээ энэ нь тэдгээрийг хүсэхгүй байгаа scrollbars-ийг нэмдэг.
Viewport нэгжүүдийг ашиглах
Өөр нэг арга бол та энэ асуудлыг шийдвэрлэх боломжтой CSS Viewport Units-т туршиж үзэх явдал юм. Хэмжээний портын өндрийг ашиглах замаар хэмжих элемент нь үзэгчдийн портын тогтоосон өндрийг барих боломжтой бөгөөд энэ нь өөрчлөгдөх үзэгдэл өөрчлөгдөнө. Энэ нь хуудасныхаа 100% өндөрт үзэгчдийг авах гайхалтай арга юм, гэхдээ өөр өөр төхөөрөмжүүд болон дэлгэцийн хэмжээнүүдэд уян хатан байх болно.