Një pyetje e përbashkët në hartimin e faqes është "si e vendosni lartësinë e një elementi në 100%"?
Kjo mund të duket si një përgjigje e lehtë. Ju thjesht përdorni CSS për të vendosur lartësinë e një elementi në 100%, por kjo nuk e shtrin gjithmonë atë element për të përshtatur tërë dritaren e shfletuesit. Le të zbulojmë se pse ndodh kjo dhe çfarë mund të bëni për të arritur këtë stil vizual.
Pixel dhe Përqindjet
Kur përcaktoni lartësinë e një elementi duke përdorur pronën CSS dhe një vlerë që përdor pixels, ky element do të marrë atë hapësirë shumë vertikale në shfletuesin.
Për shembull, një paragraf me lartësi: 100px; do të marrë deri në 100 pixels hapësirë vertikale në dizajnin tuaj. Nuk ka rëndësi sa e madhe është dritarja juaj e shfletuesit, ky element do të jetë 100 piksele në lartësi.
Përqindjet punojnë ndryshe se pixels. Sipas specifikacionit W3C, lartësitë e përqindjes llogariten në lidhje me lartësinë e enës. Pra, nëse vendosni një paragraf me një lartësi: 50%; brenda një div me një lartësi prej 100px, paragrafi do të jetë 50 piksele në lartësi, që është 50% e elementit mëmë të tij.
Pse Përqindja Heights dështojnë
Nëse po harton një faqe interneti dhe keni një kolonë që dëshironi të merrni lartësinë e plotë të dritares, pjerrësia natyrore është të shtoni një lartësi: 100%; për këtë element. Në fund të fundit, nëse vendosni gjerësinë në gjerësi: 100%; elementi do të marrë hapësirën e plotë horizontale të faqes, kështu që lartësia duhet të funksionojë e njëjtë, apo jo? Fatkeqësisht, ky nuk është aspak rasti.
Për të kuptuar se pse ndodh kjo, ju duhet të kuptoni se si shfletuesit interpretojnë lartësinë dhe gjerësinë. Shfletuesit e internetit llogarisin gjerësinë totale të disponueshme si funksion i hapjes së dritares së shfletuesit. Nëse nuk vendosni ndonjë vlerë të gjerësisë në dokumentet tuaja, shfletuesi do të rrjedhë automatikisht përmbajtjen për të mbushur gjerësinë e tërë të dritares (gjerësia 100% është parazgjedhja).
Vlera e lartësisë llogaritet ndryshe nga gjerësia. Në fakt, shfletuesit nuk e vlerësojnë lartësinë fare, përveç nëse përmbajtja është aq e gjatë sa të shkojë jashtë sheshit të shikimit (duke kërkuar kështu bare lëvizëse) ose nëse dizajni i uebit vendos një lartësi absolute për një element në faqe. Përndryshe, shfletuesi thjesht lejon që përmbajtja të rrjedhë brenda gjerësisë së shikimit derisa të vijë deri në fund. Lartësia nuk llogaritet fare.
Problemet ndodhin kur vendosni një lartësi përqindjeje në një element që ka elementë kryesorë pa vendosur lartësi - me fjalë të tjera, elementët kryesorë kanë një lartësi default: auto; . Ju jeni, në fakt, duke i kërkuar shfletuesit për të llogaritur një lartësi nga një vlerë e padefinuar. Meqenëse kjo do të ishte e barabartë me një vlerë zero, rezultati është se shfletuesi nuk bën asgjë.
Nëse doni të vendosni një lartësi në faqet tuaja në një përqindje, duhet të vendosni lartësinë e çdo elementi mëmë të atij që dëshironi të përcaktohet lartësia. Me fjalë të tjera, nëse keni një faqe si kjo:
Përmbajtja këtu
Ju me gjasë dëshironi div dhe paragrafi në të të ketë një lartësi 100%, por që div ka dy elemente kryesore:
dhe. Për të përcaktuar lartësinë e divit në një lartësi relative, duhet gjithashtu të caktoni lartësinë e trupit dhe elementët html.
Kështu që do të duhej të përdorni CSS për të vendosur lartësinë jo vetëm të divit, por edhe elementët e trupit dhe html. Kjo mund të jetë një sfidë, pasi ju mund të shpejt të merrni mbingarkuar me çdo gjë duke u vendosur në lartësi 100%, vetëm për të arritur këtë efekt të dëshiruar.
Disa gjëra që duhet të vihen në dukje kur punoni me lartësitë 100%
Tani që dini të vendosni lartësinë e elementeve të faqes tuaj në 100%, mund të jetë emocionuese të dilni dhe të bëni atë në të gjitha faqet tuaja, por ka disa gjëra që duhet të keni parasysh:
- Margjinat dhe mbushjet mund të shtojnë një shirit lëvizës ku nuk dëshironi një. Një nga gjërat më të bezdisshme që kam gjetur me të punuar me lartësitë e përqindjes (dhe gjerësi) është se atëherë mbushjet dhe kufijtë në ato elementë të njëjtë mund të shtojnë shiritë e rrotullimit në faqe, edhe pse të gjitha përmbajtjet shfaqen pa pasur nevojë të lëvizin bare. Kjo është për shkak se lartësia ose gjerësia e elementit është gjëja e parë që llogaritet. Pastaj margjinat dhe paddings janë shtuar në. Pra, nëse ju keni një element me një lartësi prej 100% dhe kufijtë e lartë dhe të poshtëm prej 10 piksel secila, do të ketë një shirit lëvizës për 20 piksele shtesë. Mos harroni, modeli i kutisë CSS shton kufirin, kufirin dhe mbushjen mbi madhësinë e një elementi, kështu që 100% me cilëndo nga këto vlera të modelit të kutisë do të jetë më shumë se 100%.
- Nëse përmbajtja juaj merr më shumë se lartësia e përcaktuar, do të mbizotërojë çdo gjë pas saj. Me fjalë të tjera, nëse keni një dizajn me një kolonë që është 80% në lartësi dhe përmbajtja brenda saj do të marrë 100% të lartësisë, 20% shtesë do të vazhdojë nën kolonën dhe do të thyejë dizajnin vizual e faqes suaj. Nëse ka përmbajtje nën këtë kolonë, teksti thjesht do të shkruajë mbi krye të saj. Shpesh e shoh këtë të ndodhë kur një projektuesi përpiqet të detyrojë lartësinë e një faqeje dhe e bën atë të funksionojë në mënyrë të përsosur për nisjen, por kur përmbajtja në atë faqe ndryshon në të ardhmen, lartësitë e tyre absolute thyejnë plotësisht rrjedhën e faqes. Kjo është dyfish e vërtetë kur ju jeni duke ndërtuar faqet e internetit të përgjegjshme, gjerësia dhe lartësia e të cilave duhet të ndryshojnë me madhësinë e shikimit.
Për të rregulluar këtë, ju mund të vendosni lartësinë e elementit gjithashtu. Nëse e vendosni në auto, do të shfaqet baret e lëvizjes nëse ato janë të nevojshme, por zhduken kur nuk janë. Kjo rregullon pushimin vizual, por shton shiritat e rrotullimeve ku ju nuk mund t'i dëshironi ato.
Përdorimi i Njësive Viewport
Një tjetër mënyrë për të trajtuar këtë sfidë është eksperimentimi me Njësitë Viewport CSS. Duke përdorur njësinë e matjes së lartësisë së shikimit, mund të madhësoni elementë për të marrë një lartësi të përcaktuar të portës së parë dhe kjo do të ndryshojë kur të ndryshojë shikimi! Kjo është një mënyrë e shkëlqyeshme për të marrë pamjet e lartësisë tuaj 100% në një faqe por ende duhet të jenë fleksibël për pajisje të ndryshme dhe madhësi të ekranit.