வலைத்தள வடிவமைப்பில் பொதுவாக கேட்கப்படும் கேள்வி "ஒரு உறுப்பு உயரத்தை 100% என்று எப்படி அமைக்க வேண்டும்"?
இது எளிதான பதிலைப் போல தோன்றலாம். நீங்கள் வெறுமனே 100% ஒரு உறுப்பு உயரம் அமைக்க CSS பயன்படுத்த, ஆனால் இந்த எப்போதும் முழு உலாவி சாளரத்தை பொருந்தும் என்று உறுப்பு நீட்டி இல்லை. இது ஏன் நிகழ்கிறது என்பதையும், இந்த காட்சி பாணி அடைய நீங்கள் என்ன செய்ய முடியும் என்பதையும் அறியலாம்.
பிக்சல்கள் மற்றும் சதவீதங்கள்
நீங்கள் CSS சொத்து மற்றும் பிக்சல் பயன்படுத்தும் ஒரு மதிப்பு பயன்படுத்தி ஒரு உறுப்பு உயரம் வரையறுக்க போது, அந்த உறுப்பு உலாவியில் என்று மிகவும் செங்குத்து இடைவெளி எடுக்கும்.
உதாரணமாக, உயரம் கொண்ட ஒரு பத்தி: 100px; உங்கள் வடிவமைப்பில் 100 பிக்சல்கள் செங்குத்து இடைவெளியை எடுக்கும்.உங்கள் உலாவி சாளரம் எவ்வளவு பெரியதாக இருந்தாலும், இந்த உறுப்பு உயரம் 100 பிக்சல்கள் ஆகும்.
சதவீதங்கள் பிக்சல்கள் விட வித்தியாசமாக வேலை செய்கின்றன. W3C விவரக்குறிப்பின் படி, கொள்கலன் உயரத்தை பொறுத்து சதவீத உயரங்கள் கணக்கிடப்படுகின்றன. எனவே, ஒரு பத்தியை உயரம் கொண்டால்: 50%; 100px உயரம் கொண்ட ஒரு div உள்ளே, பத்தி 50 பிக்சல்கள் உயரம், இது 50% பெற்றோர் உறுப்பு ஆகும்.
சதவீத உயரங்கள் ஏன் தோல்வியடைகின்றன?
நீங்கள் ஒரு வலைப்பக்கத்தை வடிவமைத்திருந்தால், சாளரத்தின் முழு உயரத்தை நீங்கள் எடுக்க விரும்பும் ஒரு நெடுவரிசை கொண்டிருக்கும்பட்சத்தில், இயற்கைச் சாயல் 100%; அந்த உறுப்புக்கு. நீ அகலத்தை அகலமாக அமைத்தால், 100%; உறுப்பு பக்கத்தின் முழு கிடைமட்ட இடத்தையும் எடுக்கும், எனவே உயரம் அதே போல வேலை செய்ய வேண்டும், இல்லையா? துரதிருஷ்டவசமாக, இது வழக்கு அல்ல.
இது ஏன் நடக்கிறது என்பதைப் புரிந்து கொள்ள, உலாவிகளில் உயரம் மற்றும் அகலம் எப்படி விளக்குகிறது என்பதை நீங்கள் புரிந்து கொள்ள வேண்டும். உலாவி சாளரத்தை திறந்திருக்கும் பரந்த செயல்பாட்டை மொத்த வலைப்பின்னலை வலை உலாவிகள் கணக்கிடுகின்றன. உங்கள் ஆவணங்களில் ஏதேனும் அகல மதிப்புகளை அமைக்கவில்லை என்றால், சாளரத்தின் முழு அகலத்தையும் (100% அகலம் இயல்புநிலை) பூர்த்தி செய்வதற்கு தானாக உள்ளடக்கத்தை உலாவி விடுகிறது.
உயரம் மதிப்பு அகலத்தை விட வித்தியாசமாக கணக்கிடப்படுகிறது. உண்மையில், உள்ளடக்கமானது மிக நீண்ட காலமாக காட்சியளிக்கும் வெளியில் (ஸ்க்ரோல் பார்கள் தேவைப்படும்) அல்லது இணைய வடிவமைப்பாளரின் பக்கம் ஒரு உறுப்புக்கு ஒரு முழுமையான உயரத்தை அமைத்தால் அது உயரத்தை மதிப்பீடு செய்யாது. இல்லையெனில், உலாவி வெறுமனே இறுதி வரை வரும் வரை காட்சியளிப்பு அகலத்தில் உள்ளடக்கத்தை ஓட்டம் உதவுகிறது. உயரம் உண்மையில் கணக்கிடப்படவில்லை.
உயரங்கள் அமைக்கப்படாத பெற்றோர் உறுப்புகள் கொண்ட ஒரு உறுப்பு மீது ஒரு சதவிகித உயரம் அமைக்கும்போது சிக்கல்கள் ஏற்படுகின்றன - வேறு வார்த்தைகளில் கூறுவதானால், பெற்றோர் கூறுகள் இயல்புநிலை உயரம்: தானாகவே; . நீங்கள் வரையறுக்கப்படாத மதிப்பிலிருந்து ஒரு உயரத்தை கணக்கிட உலாவி கேட்கிறீர்கள். அது பூஜ்ய மதிப்புக்கு சமமாக இருப்பதால், இதன் விளைவாக உலாவி ஒன்றும் செய்யாது.
உங்கள் வலைப்பக்கங்களில் ஒரு சதவிகிதம் உயரத்தை அமைக்க விரும்பினால், நீங்கள் உயரத்தை வரையறுக்க விரும்பும் ஒவ்வொரு பெற்றோர் உறுப்பின் உயரத்தையும் அமைக்க வேண்டும். வேறு வார்த்தைகளில் சொன்னால், உங்களுக்கு இது போன்ற ஒரு பக்கம் இருந்தால்:
உள்ளடக்கம் இங்கே
நீங்கள் பி.டி. மற்றும் பத்தியை 100% உயரம் வேண்டும் என்று விரும்புகிறீர்கள், ஆனால் அந்த டி.விக்கு உண்மையில் இரண்டு பெற்றோர் கூறுகள் உள்ளன:
மற்றும். உறவினர் உயரத்திற்கு டிவின் உயரத்தை வரையறுக்க, நீங்கள் உடல் மற்றும் HTML உறுப்புகளின் உயரத்தையும் அமைக்க வேண்டும்.
எனவே நீங்கள் div பயன்படுத்த மட்டும் CSS பயன்படுத்த வேண்டும், ஆனால் உடல் மற்றும் HTML உறுப்புகள். இது ஒரு சவாலாக இருக்கக்கூடும், ஏனென்றால் எல்லாவற்றையும் 100% உயரத்திற்கு அமைத்து, இந்த விரும்பிய விளைவை அடைவதற்கு மட்டும் விரைவாக நீங்கள் விரைந்து கொள்ளலாம்.
100% ஹைட்ஸ் வேலை செய்யும் போது கவனிக்க வேண்டிய சில விஷயங்கள்
இப்போது உங்கள் பக்க கூறுகளின் உயரத்தை 100% என்று எப்படி அமைப்பது என்று உங்களுக்குத் தெரியும், அது வெளியே சென்று உங்கள் எல்லா பக்கங்களுக்கும் அதைச் செய்ய உற்சாகமாக இருக்கலாம், ஆனால் சில விஷயங்கள் உங்களுக்குத் தெரிந்திருக்க வேண்டும்:
- நீங்கள் ஒன்றும் விரும்பாத ஒரு உருள் பட்டை விளிம்புகளையும் திணிப்புகளையும் சேர்க்கலாம். சதவிகிதம் உயரங்களை (மற்றும் அகலங்கள்) பணிபுரியும் மிகவும் எரிச்சலூட்டும் விஷயங்களில் ஒன்று, அதே உறுப்புகளில் திணிப்பு மற்றும் ஓரங்கள் பக்கத்திற்கு ஸ்க்ரோல் பார்கள் சேர்க்கலாம், இருப்பினும் அனைத்து உள்ளடக்கமும் ஸ்க்ரோல் பார்கள் தேவையில்லாமலேயே காட்சிகளை காண்பிக்கும். இது ஏனெனில் உறுப்புகளின் உயரம் அல்லது அகலம் கணக்கிடப்படும் முதல் விஷயம். பின்னர் ஓரங்கள் மற்றும் paddings சேர்க்கப்படுகின்றன. எனவே, 100% உயரம் மற்றும் 10 பிக்சல்களின் மேல் மற்றும் கீழ் விளிம்புகள் கொண்ட உறுப்பு இருந்தால், கூடுதல் 20 பிக்சல்களுக்கு ஒரு சுருள் பட்டை இருக்கும். நினைவில் வைத்து கொள்ளுங்கள், CSS பாக்ஸ் மாதிரி ஒரு உறுப்பு அளவு மீது விளிம்பு, எல்லை மற்றும் திணிப்பு சேர்க்கிறது, அதனால் அந்த மற்ற பாக்ஸ் மாதிரி மதிப்புகள் எந்த 100% உண்மையில் 100 க்கும் மேற்பட்ட இருக்கும்.
- வரையறுக்கப்பட்ட உயரத்தை விட உங்கள் உள்ளடக்கம் அதிகமானால், அது அதற்குப் பிறகு மேலெழுதும். வேறு வார்த்தைகளில் கூறுவதானால், நீங்கள் உயரத்தின் 80% கொண்ட ஒரு நிரலுடன் வடிவமைத்திருந்தால், அதன் உள்ளே உள்ள உள்ளடக்கம் 100% உயரத்தை எடுக்கும், கூடுதல் 20% நெடுவரிசைக்கு கீழே சென்று, காட்சி வடிவமைப்பு உடைக்கப்படும் உங்கள் பக்கம். அந்த நெடுவரிசையில் கீழே உள்ள உள்ளடக்கம் இருந்தால், உரை வெறுமனே அதன் மேல் எழுதப்படும். வலைப்பின்னல் வடிவமைப்பாளர் ஒரு பக்கத்தின் உயரத்தை கட்டாயப்படுத்த முயற்சிக்கும்போது, அதைத் தொடங்குவதற்கு அது சரியாக வேலை செய்யும் போது நான் அடிக்கடி இதைப் பார்க்கிறேன், ஆனால் அந்த பக்கத்தின் உள்ளடக்கத்தில் எதிர்காலத்தில் மாற்றங்கள் ஏற்பட்டால், அவர்களின் முழுமையான உயரங்கள் பக்கத்தின் ஓட்டத்தை முழுமையாக உடைக்கின்றன. நீங்கள் யாருடைய அகலம் மற்றும் உயரம் காட்சியும் அளவு மாற்ற வேண்டும் பதிலளிக்க வலைத்தளங்கள் கட்டி போது இது இரட்டை உண்மை.
இதை சரிசெய்ய, உறுப்புகளின் உயரத்தை நீங்கள் அமைக்கலாம். நீங்கள் அதை தானாக அமைக்கினால், அவற்றிற்கு தேவைப்படும் போது ஸ்க்ரோல் பார்கள் தோன்றும், ஆனால் அவை இல்லாதபோது மறைந்துவிடும். அது காட்சி இடைவெளியை சரி செய்கிறது, ஆனால் அவற்றை நீங்கள் விரும்பாத இடத்தில் சுருள்பட்டிகளை சேர்க்கிறது.
காட்சியமைவு அலகுகளைப் பயன்படுத்துதல்
இந்த சவாலை சமாளிக்க இன்னொரு வழி CSS காட்சியும் அலகுகள் முயற்சிக்க வேண்டும். அளவிடக்கூடிய பார்வை உயர அலகுகளைப் பயன்படுத்துவதன் மூலம், காட்சியமைப்புகளின் வரையறுக்கப்பட்ட உயரத்தை அளவுரு கூறுவதன் மூலம், காட்சியமைப்பு மாற்றங்களை மாற்றும்! இது ஒரு பக்கம் உங்கள் 100% உயரம் காட்சிகள் பெற ஒரு சிறந்த வழி ஆனால் இன்னும் அவர்கள் வெவ்வேறு சாதனங்கள் மற்றும் திரை அளவுகள் நெகிழ்வான வேண்டும்.