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