వెబ్సైట్ రూపకల్పనలో సాధారణంగా అడిగిన ప్రశ్న "మీరు ఒక మూలకం యొక్క ఎత్తును 100% కు ఎలా సెట్ చేస్తారు"?
ఇది సులభమైన సమాధానం లాగా అనిపించవచ్చు. మీరు కేవలం 100% కు మూలకం యొక్క ఎత్తును సెట్ చేయడానికి CSS ను ఉపయోగించుకుంటారు, కానీ ఇది ఎల్లప్పుడూ మొత్తం బ్రౌజర్ విండోకి సరిపోయేలా ఆ అంశాన్ని విస్తరించదు. ఇది ఎందుకు జరిగిందో తెలుసుకోవడానికి మరియు ఈ విజువల్ స్టైల్ సాధించడానికి మీరు ఏమి చేయవచ్చో చూద్దాం.
పిక్సెల్స్ మరియు శాతములు
మీరు CSS మూలకం మరియు పిక్సెల్స్ ఉపయోగించే విలువను ఉపయోగించి ఒక మూలకం యొక్క ఎత్తును నిర్వచించినప్పుడు, ఆ మూలకం బ్రౌజర్లో ఎక్కువ నిలువు ఖాళీని పడుతుంది.
ఉదాహరణకు, ఒక పేరాగ్రాఫ్: 100px; మీ రూపకల్పనలో 100 నిలువు నిలువు స్థలాన్ని ఆక్రమిస్తుంది.మీ బ్రౌజర్ విండో ఎంత పెద్దది కాదు, ఈ మూలకం ఎత్తులో 100 పిక్సెల్స్ అవుతుంది.
శాతం పిక్సెల్స్ కంటే భిన్నంగా పని చేస్తుంది. W3C స్పెసిఫికేషన్ ప్రకారం, కంటైనర్ యొక్క ఎత్తు సంబంధించి శాతం ఎత్తులు లెక్కించబడతాయి. మీరు ఒక పేరాను ఒక ఎత్తుతో చేస్తే: 50%; 100px ఎత్తుతో ఒక div లోపల, పేరా 50 పిక్సెల్స్ ఎత్తు ఉంటుంది, ఇది 50% మూలకం యొక్క మూలకం.
ఎందుకు శాతం హైట్స్ వైఫల్యం
మీరు వెబ్పేజీ రూపకల్పన చేస్తే, మీరు విండో యొక్క పూర్తి ఎత్తును తీసుకోవాలని కోరుకుంటున్న ఒక కాలమ్ కలిగి ఉంటే, సహజ వంపుతిరిగిన ఎత్తును జోడించడం: 100%; ఆ మూలకానికి. అంతేకాక, వెడల్పు వెడల్పుకు సెట్ చేస్తే: 100%; మూలకం పేజీ యొక్క పూర్తి సమాంతర స్థలం పడుతుంది, కాబట్టి ఎత్తు కుడి, అదే పని చేయాలి? దురదృష్టవశాత్తు, ఇది అస్సలు కాదు.
ఇది జరిగినప్పుడు ఎందుకు అర్థం చేసుకోవాలంటే, బ్రౌజర్లు ఎత్తు మరియు వెడల్పును ఎలా అర్థం చేసుకుంటున్నాయో మీరు అర్థం చేసుకోవాలి. వెబ్ బ్రౌజర్ బ్రౌసర్ విండో ఎలా తెరవబడి ఉంటుందో దాని యొక్క ఫంక్షన్గా అందుబాటులో ఉన్న మొత్తం వెడల్పును లెక్కించవచ్చు. మీరు మీ పత్రాల్లో ఏదైనా వెడల్పు విలువలను సెట్ చేయకపోతే, విండో యొక్క మొత్తం వెడల్పు (100% వెడల్పు డిఫాల్ట్) పూరించడానికి బ్రౌజర్ స్వయంచాలకంగా కంటెంట్లను పంపుతుంది.
ఎత్తు విలువ వెడల్పు కంటే విభిన్నంగా లెక్కిస్తారు. వాస్తవానికి, వీక్షణపోర్ట్ వెలుపల వెళ్లిపోయేంత కాలం (స్క్రోల్ బార్లు అవసరం) లేదా వెబ్ డిజైనర్ పేజీలో ఒక ఎలిమెంట్ కోసం ఒక సంపూర్ణ ఎత్తును అమర్చినట్లయితే, బ్రౌజర్లు అన్నింటికీ ఎత్తును విశ్లేషించవు. లేకపోతే, బ్రౌజర్ చివరికి వచ్చే వరకు వీక్షణపోర్ట్ యొక్క వెడల్పు లోపల కంటెంట్ ప్రవాహాన్ని అనుమతిస్తుంది. ఎత్తు నిజానికి లెక్కించబడదు.
ఎత్తు ఎక్కే లేకుండా మాతృ అంశాలను కలిగి ఉన్న ఒక ఎలిమెంట్లో ఒక శాతం ఎత్తును సెట్ చేసినప్పుడు సమస్యలు సంభవిస్తాయి - ఇతర మాటలలో, మాతృ అంశాల డిఫాల్ట్ ఎత్తు కలిగి ఉంటుంది: ఆటో; . మీరు నిర్వచించని విలువ నుండి ఒక ఎత్తును లెక్కించడానికి బ్రౌజర్ను అడుగుతూ ఉంటారు. అది ఒక శూన్య-విలువకు సమానం కనుక, ఫలితంగా బ్రౌజర్ ఏదీ చేయదు.
మీరు ఒక శాతం మీ వెబ్ పేజీలలో ఒక ఎత్తు సెట్ చేయాలనుకుంటే, మీరు ఎత్తు నిర్వచించిన కావలసిన ఒక ప్రతి పేరెంట్ మూలకం యొక్క ఎత్తు సెట్ చేయాలి. ఇతర మాటలలో, మీరు ఇలాంటి పేజీని కలిగి ఉంటే:
ఇక్కడ కంటెంట్
మీరు డివై మరియు పేరాగ్రాఫ్ను 100% ఎత్తు కలిగి ఉండాలని అనుకోవచ్చు, కానీ ఆ దెయ్యం నిజానికి రెండు పేరెంట్ మూలాలను కలిగి ఉంటుంది:
మరియు. ఒక సాపేక్ష ఎత్తు DIV యొక్క ఎత్తు నిర్వచించడానికి, మీరు అలాగే శరీరం మరియు html అంశాల ఎత్తు సెట్ చేయాలి.
సో మీరు DIV మాత్రమే ఎత్తు సెట్ CSS ఉపయోగించడానికి అవసరం, కానీ కూడా శరీరం మరియు html అంశాలు. ఈ సవాలుగా ఉంటుంది, ఎందుకంటే మీరు ప్రతి ఒక్కటీ 100% ఎత్తుకు సెట్ చేయబడటంతో, త్వరగా ఈ కావలసిన ప్రభావాన్ని సాధించడానికి మీరు త్వరగా నిమగ్నమవుతారు.
100% హైట్స్తో పని చేస్తున్నప్పుడు కొన్ని విషయాలు గమనించండి
మీ పేజీ అంశాల యొక్క ఎత్తును 100% కు ఎలా సెట్ చేయాలో ఇప్పుడు మీకు తెలుసు, అది బయటకు వెళ్లి అన్ని మీ పేజీలకు చేయటానికి ఉత్సాహంగా ఉంటుంది, కానీ మీరు తెలుసుకోవలసిన కొన్ని విషయాలు ఉన్నాయి:
- అంచులు మరియు ప్యాడింగ్ మీరు ఒక వద్దు పేరు ఒక స్క్రోల్ బార్ జోడించవచ్చు. శాతం ఎత్తులు (మరియు వెడల్పులు) తో పనిచేసిన నేను కనుగొన్న అత్యంత అసౌకర్య విషయాలలో ఇది ఒకటి, అప్పుడు ఆ ఒకే అంశాలపై పాడింగ్ మరియు అంచులు స్క్రోల్ బార్లు అవసరం లేకుండా కంటెంట్ను ప్రదర్శిస్తున్నప్పటికీ, పేజీకి స్క్రోల్ బార్లను జోడించవచ్చు. మూలకం యొక్క ఎత్తు లేదా వెడల్పు లెక్కించిన మొదటి విషయం ఎందుకంటే ఇది. అప్పుడు అంచులు మరియు paddings న జోడించబడ్డాయి. మీరు 100 పిక్సల్స్ యొక్క 100% మరియు అగ్ర మరియు దిగువ అంచులతో ఉన్న మూలకం కలిగి ఉంటే, అదనపు 20 పిక్సెల్ల కోసం స్క్రోల్ బార్ ఉంటుంది. గుర్తుంచుకోండి, CSS బాక్స్ నమూనా ఒక మూలకం యొక్క పరిమాణంలో మార్జిన్, సరిహద్దు మరియు పాడింగ్లను జోడిస్తుంది, కాబట్టి ఆ ఇతర బాక్స్ మోడల్ విలువల్లో ఏవైనా 100% వాస్తవానికి 100% కంటే ఎక్కువగా ఉంటుంది.
- మీ కంటెంట్ నిర్వచించిన ఎత్తు కంటే ఎక్కువగా ఉంటే, దాని తర్వాత ఏదైనా భర్తీ చేస్తుంది. మరో మాటలో చెప్పాలంటే, మీరు 80% ఎత్తు ఉన్న కాలమ్తో డిజైన్ చేస్తే, అది లోపలికి వచ్చే కంటెంట్ 100% ఎత్తులో పడుతుంది, అదనపు 20% కాలమ్ క్రింద కొనసాగుతుంది మరియు దృశ్య రూపకల్పనను విచ్ఛిన్నం చేస్తుంది మీ పేజీ. ఆ నిలువు వరుస క్రింద ఉన్న కంటెంట్ ఉంటే, అది దాని పైభాగంలో వ్రాసేటట్లు చేస్తుంది. ఒక వెబ్ డిజైనర్ ఒక పేజీ యొక్క ఎత్తుని బలవంతం చేయటానికి ప్రయత్నించినప్పుడు మరియు అది ప్రయోగించటానికి సరిగ్గా పనిచేయటానికి ప్రయత్నిస్తే నేను తరచూ చూస్తాను, కానీ ఆ పేజీలో ఉన్న కంటెంట్ భవిష్యత్తులో మార్పులు చేసినప్పుడు, వారి సంపూర్ణ ఎత్తులన్నీ పేజీ ప్రవాహాన్ని పూర్తిగా విచ్ఛిన్నం చేస్తాయి. మీరు దీని వెడల్పు మరియు ఎత్తు వీక్షణపోర్ట్ పరిమాణంతో మార్చాలి బాధ్యతాయుతంగా వెబ్సైట్లు నిర్మిస్తున్నప్పుడు ఈ రెట్టింపైన నిజం.
దీనిని పరిష్కరించడానికి, మీరు మూలకం యొక్క ఎత్తును కూడా అమర్చవచ్చు. మీరు దీన్ని ఆటోకి సెట్ చేస్తే, స్క్రోల్ బార్లు అవసరమైతే కనిపిస్తాయి కానీ అవి లేనప్పుడు అదృశ్యం అవుతుంది. అది విజువల్ బ్రేక్ను సరిచేస్తుంది, కాని అది వాటిని మీరు కోరుకోలేని స్క్రోల్బార్లను జతచేస్తుంది.
వీక్షణపోర్ట్ యూనిట్లు ఉపయోగించడం
మీరు ఈ సవాలును అధిగమించగలిగే మరో మార్గం ఏమిటంటే, CSS వీక్షణపోర్ట్ యూనిట్ల ప్రయోగం. కొలత యొక్క వీక్షణపోర్ట్ ఎత్తు యూనిట్ను ఉపయోగించడం ద్వారా, వీక్షణపోర్ట్ యొక్క నిర్వచించిన ఎత్తును పరిమాణ అంశాలు ఎంచుకోవచ్చు, మరియు ఇది వీక్షణపోర్ట్ మార్పుల వలె మారుతుంది! ఈ పేజీలో మీ 100% ఎత్తు విజువల్స్ పొందడానికి ఒక గొప్ప మార్గం కానీ ఇప్పటికీ వాటిని వివిధ పరికరాలు మరియు తెర పరిమాణాల కోసం సౌకర్యవంతమైన ఉంటుంది.