எஞ்சியிருக்கும் திரை

Jules David

செவ்வாய், 16 ஜூலை, 2024 ’அன்று’ பிற்பகல் 7:10:21

முழு உயர உள்ளடக்கத்திற்கான தளவமைப்புகளை மேம்படுத்துதல்

முழு திரை இடத்தையும் திறம்பட பயன்படுத்தும் வலை பயன்பாட்டை உருவாக்குவது ஒரு பொதுவான சவாலாகும். உள்ளடக்கமானது முழுத் திரையின் உயரத்தையும் நிரப்புகிறது என்பதை உறுதிசெய்ய, குறிப்பாக டைனமிக் தலைப்பு இருக்கும் போது, கவனமாக திட்டமிடல் மற்றும் செயல்படுத்தல் தேவைப்படுகிறது. தலைப்பு பெரும்பாலும் லோகோக்கள் மற்றும் கணக்குத் தகவல் போன்ற அத்தியாவசிய கூறுகளைக் கொண்டுள்ளது, மேலும் அதன் உயரம் மாறுபடலாம்.

டேபிள்களை நம்பாமல் மீதமுள்ள திரை இடத்தை உள்ளடக்கத் துறையை ஆக்கிரமிக்கச் செய்வதே குறிக்கோள். இது தந்திரமானதாக இருக்கலாம், குறிப்பாக உள்ளடக்கத் தொகுதிக்குள் இருக்கும் கூறுகள் சதவீத உயரங்களுக்கு ஏற்ப மாற்றிக்கொள்ள வேண்டும். நவீன CSS நுட்பங்களைப் பயன்படுத்தி இந்த அமைப்பை எவ்வாறு அடைவது என்பதை இந்தக் கட்டுரை ஆராய்கிறது.

கட்டளை	விளக்கம்
flex-direction: column;	ஃப்ளெக்ஸ் கொள்கலனின் முக்கிய அச்சை செங்குத்தாக அமைக்கிறது, குழந்தைகளை மேலிருந்து கீழாக அடுக்கி வைக்கிறது.
flex: 1;	ஃப்ளெக்ஸ் உருப்படி வளர மற்றும் ஃப்ளெக்ஸ் கொள்கலனுக்குள் இருக்கும் இடத்தை நிரப்ப அனுமதிக்கிறது.
grid-template-rows: auto 1fr;	இரண்டு வரிசைகள் கொண்ட ஒரு கட்ட அமைப்பை வரையறுக்கிறது, அங்கு முதல் வரிசையில் ஒரு தானியங்கி உயரம் உள்ளது மற்றும் இரண்டாவது வரிசை மீதமுள்ள இடத்தை எடுக்கும்.
overflow: auto;	உள்ளடக்கம் கன்டெய்னரில் அதிகமாக இருந்தால் ஸ்க்ரோலிங் இயக்குகிறது, தேவைக்கேற்ப ஸ்க்ரோல்பார்களைச் சேர்க்கிறது.
height: 100vh;	ஒரு உறுப்பின் உயரத்தை வியூபோர்ட் உயரத்தின் 100% ஆக அமைக்கிறது.
grid-template-rows	கட்டம் அமைப்பில் ஒவ்வொரு வரிசையின் அளவையும் குறிப்பிடுகிறது.
display: flex;	ஃப்ளெக்ஸ் கொள்கலனை வரையறுக்கிறது, அதன் குழந்தைகளுக்கான ஃப்ளெக்ஸ்பாக்ஸ் தளவமைப்பு மாதிரியை செயல்படுத்துகிறது.

நவீன CSS லேஅவுட் நுட்பங்களைப் பயன்படுத்துதல்

முதல் ஸ்கிரிப்ட்டில், நாங்கள் பயன்படுத்துகிறோம் Flexbox ஒரு செய்ய div மீதமுள்ள திரை இடத்தை நிரப்பவும். தி container வகுப்பு அமைக்கப்பட்டுள்ளது display: flex மற்றும் flex-direction: column. இது தலைப்பு மற்றும் உள்ளடக்கத்தை செங்குத்தாக அடுக்குகிறது. உள்ளடக்கம் பயன்படுத்தும் போது, தலைப்பு நிலையான உயரத்தைக் கொண்டுள்ளது flex: 1 மீதமுள்ள இடத்தை நிரப்ப. இந்த அணுகுமுறையானது, தலைப்பின் உயரத்தைப் பொருட்படுத்தாமல், மீதமுள்ள எந்த உயரத்தையும் ஆக்கிரமிப்பதற்கு உள்ளடக்கம் DIV மாறும் வகையில் சரிசெய்வதை உறுதி செய்கிறது. தி overflow: auto காணக்கூடிய பகுதியை விட உள்ளடக்கம் அதிகமாக இருந்தால், நிரம்பி வழியும் சிக்கல்கள் இல்லாமல் சுத்தமான தளவமைப்பைப் பராமரித்தால், ஸ்க்ரோல் செய்யக்கூடிய உள்ளடக்கத்தை சொத்து அனுமதிக்கிறது.

இரண்டாவது எழுத்தில், CSS Grid தளவமைப்புக்காக பயன்படுத்தப்படுகிறது. தி container வகுப்பு அமைக்கப்பட்டுள்ளது display: grid உடன் grid-template-rows: auto 1fr. இது இரண்டு வரிசைகளுடன் ஒரு கட்டத்தை உருவாக்குகிறது: முதல் வரிசை (தலைப்பு) தானாகவே அதன் உயரத்தை சரிசெய்கிறது, இரண்டாவது வரிசை (உள்ளடக்கம்) மீதமுள்ள இடத்தை நிரப்புகிறது. ஃப்ளெக்ஸ்பாக்ஸ் எடுத்துக்காட்டைப் போலவே, உள்ளடக்க டிவியும் உள்ளது overflow: auto வழிதல் உள்ளடக்கத்தை நேர்த்தியாக கையாளும் சொத்து. இரண்டு முறைகளும் அட்டவணைகளின் தேவையை நீக்குகின்றன, நவீன CSS தளவமைப்பு நுட்பங்களைப் பயன்படுத்தி, ஒரு நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய வடிவமைப்பை அடைகின்றன, இது பல்வேறு தலைப்பு உயரங்களுக்குச் சரிசெய்கிறது மற்றும் உள்ளடக்கம் பக்கத்தின் மற்ற பகுதிகளை நிரப்புவதை உறுதி செய்கிறது.

ஃப்ளெக்ஸ்பாக்ஸைப் பயன்படுத்தி, மீதமுள்ள திரை இடத்தை நிரப்பவும்

ஃப்ளெக்ஸ்பாக்ஸைப் பயன்படுத்தி HTML மற்றும் CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .header {
      background-color: #f8f9fa;
      padding: 10px;
    }
    .content {
      flex: 1;
      background-color: #e9ecef;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="content">
      <p>Content goes here...</p>
    </div>
  </div>
</body>
</html>

மீதமுள்ள திரை இடத்தை நிரப்ப CSS கட்டத்தைப் பயன்படுத்துதல்

கிரிட் அமைப்பைப் பயன்படுத்தி HTML மற்றும் CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: grid;
      grid-template-rows: auto 1fr;
      height: 100vh;
    }
    .header {
      background-color: #f8f9fa;
      padding: 10px;
    }
    .content {
      background-color: #e9ecef;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="content">
      <p>Content goes here...</p>
    </div>
  </div>
</body>
</html>

முழு உயர உள்ளடக்க தளவமைப்புகளுக்கான மேம்பட்ட நுட்பங்கள்

உறுதிப்படுத்த மற்றொரு பயனுள்ள முறை div பயன்படுத்தப்படும் மீதமுள்ள திரை இடத்தை நிரப்புகிறது Viewport Height (vh) இணைந்து அலகு Calc(). தி vh யூனிட் வியூபோர்ட்டின் உயரத்தின் சதவீதத்தை பிரதிபலிக்கிறது, இது பதிலளிக்கக்கூடிய வடிவமைப்புகளுக்கு பயனுள்ளதாக இருக்கும். உள்ளடக்கத்தின் உயரத்தை அமைப்பதன் மூலம் calc(100vh - [header height]), நீங்கள் தலைப்பின் உயரத்தின் அடிப்படையில் உயரத்தை மாறும் வகையில் சரிசெய்யலாம். இந்த அணுகுமுறை நிலையான அல்லது அறியப்பட்ட உயரங்களைக் கொண்ட தலைப்புகளுக்கு நன்றாக வேலை செய்கிறது, எப்பொழுதும் எஞ்சிய இடத்தை நிரப்பும் உள்ளடக்கத்தை உறுதி செய்கிறது. கூடுதலாக, பயன்படுத்தி vh வெவ்வேறு திரை அளவுகளில் சீரான தளவமைப்பு நடத்தையை பராமரிக்க அலகுகள் உதவுகின்றன.

மிகவும் சிக்கலான தளவமைப்புகளுக்கு, உறுப்புகளின் உயரத்தை மாறும் வகையில் கணக்கிட்டு சரிசெய்ய ஜாவாஸ்கிரிப்ட் பயன்படுத்தப்படலாம். சாளரத்தின் மறுஅளவிடுதல் நிகழ்வில் நிகழ்வு கேட்பவர்களை இணைப்பதன் மூலம், சாளர அளவு மாறும் போதெல்லாம் உள்ளடக்கத்தின் உயரத்தை நீங்கள் மீண்டும் கணக்கிடலாம். இந்த முறை அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது மற்றும் பல்வேறு தலைப்பு உயரங்களையும் மாறும் உள்ளடக்கத்தையும் கையாள முடியும். ஜாவாஸ்கிரிப்டை CSS உடன் இணைப்பதன் மூலம், உங்கள் தளவமைப்பு பதிலளிக்கக்கூடியதாகவும், வெவ்வேறு திரை அளவுகள் மற்றும் உள்ளடக்க மாற்றங்களுக்கு ஏற்றவாறு மாற்றியமைக்கக்கூடியதாகவும் இருப்பதை உறுதிசெய்கிறது, இது வலைப் பயன்பாடுகளில் முழு-உயர உள்ளடக்கப் பிரிவுகளுக்கு வலுவான தீர்வை வழங்குகிறது.

முழு உயர உள்ளடக்க தளவமைப்புகளுக்கான பொதுவான கேள்விகள் மற்றும் தீர்வுகள்

டைனமிக் உயரங்களுக்கு calc() செயல்பாட்டை எவ்வாறு பயன்படுத்துவது?
தி calc() செயல்பாடு போன்ற CSS சொத்து மதிப்புகளைத் தீர்மானிக்க கணக்கீடுகளைச் செய்ய உங்களை அனுமதிக்கிறது height: calc(100vh - 50px) 50px தலைப்பைக் கணக்கிட.
CSS இல் vh அலகு என்றால் என்ன?
தி vh அலகு என்பது வியூபோர்ட் உயரத்தைக் குறிக்கிறது 1vh வியூபோர்ட்டின் உயரத்தில் 1%க்கு சமம், இது பதிலளிக்கக்கூடிய வடிவமைப்பிற்கு பயனுள்ளதாக இருக்கும்.
டைனமிக் ஹெடர் உயரங்களை நான் எவ்வாறு கையாள்வது?
தலைப்பின் உயரத்தை அளவிட ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும், அதற்கேற்ப உள்ளடக்கத்தின் உயரத்தை சரிசெய்யவும், மீதமுள்ள இடத்தை அது மாறும் வகையில் நிரப்புகிறது.
ஃப்ளெக்ஸ்பாக்ஸ் மற்றும் கிரிட் இணைக்க முடியுமா?
ஆம், நீங்கள் இணைக்கலாம் Flexbox மற்றும் Grid ஒரே திட்டத்தில் உள்ள தளவமைப்புகள் வெவ்வேறு தளவமைப்புத் தேவைகளுக்கு அவற்றின் வலிமையைப் பயன்படுத்துகின்றன.
உள்ளடக்கத் துறையில் சுருள்தன்மையை எவ்வாறு உறுதி செய்வது?
உள்ளடக்கத்தை அமைக்கவும் overflow சொத்து auto உள்ளடக்கம் div இன் உயரத்தை மீறும் போது ஸ்க்ரோல்பார்களைச் சேர்க்க.
தளவமைப்புச் சரிசெய்தலுக்கு JavaScript ஐப் பயன்படுத்துவதன் நன்மைகள் என்ன?
ஜாவாஸ்கிரிப்ட் டைனமிக் உள்ளடக்கம் மற்றும் மாறுபட்ட உறுப்பு அளவுகளைக் கையாளுவதற்கு நிகழ்நேர சரிசெய்தல் மற்றும் நெகிழ்வுத்தன்மையை வழங்குகிறது, இது தளவமைப்பின் வினைத்திறனை மேம்படுத்துகிறது.
தளவமைப்புக்கு அட்டவணைகளைப் பயன்படுத்துவதைத் தவிர்க்க முடியுமா?
ஆம், நவீன CSS தளவமைப்பு நுட்பங்கள் போன்றவை Flexbox மற்றும் Grid பாரம்பரிய அட்டவணை அடிப்படையிலான தளவமைப்புகளை விட நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய தீர்வுகளை வழங்குகின்றன.
CSS கட்டத்தைப் பயன்படுத்தி மீதமுள்ள உயரத்தை எப்படி நிரப்புவது?
கட்டம் கொள்கலனை அமைக்கவும் grid-template-rows: auto 1fr, இரண்டாவது வரிசையில் (உள்ளடக்கம்) அமைக்கப்பட்டுள்ளது 1fr மீதமுள்ள உயரத்தை நிரப்ப.
முழு உயர அமைப்புகளில் 100vh அலகு என்ன பங்கு வகிக்கிறது?
தி 100vh யூனிட் வியூபோர்ட்டின் முழு உயரத்தையும் பிரதிபலிக்கிறது, இது வியூபோர்ட்டின் அளவைப் பொறுத்து உறுப்புகளை பதிலளிக்கக்கூடியதாக அளவிட அனுமதிக்கிறது.
பதிலளிக்கக்கூடிய தளவமைப்புகளுக்கு நான் குறைந்தபட்ச உயரத்தைப் பயன்படுத்தலாமா?
ஆம், பயன்படுத்தி min-height ஒரு உறுப்பு குறைந்தபட்ச உயரத்தை பராமரிப்பதை உறுதிசெய்கிறது, இது உள்ளடக்கம் நிரம்பி வழிவதை நிர்வகிப்பதற்கும் தளவமைப்பு நிலைத்தன்மையை பராமரிக்கவும் உதவும்.

ரேப்பிங் அப் லேஅவுட் டெக்னிக்ஸ்

போன்ற நவீன CSS நுட்பங்களைப் பயன்படுத்துவதன் மூலம் Flexbox மற்றும் Grid, வலை டெவலப்பர்கள் தளவமைப்புகளை திறம்பட உருவாக்க முடியும், அங்கு ஒரு உள்ளடக்க DIV மீதமுள்ள திரை இடத்தை நிரப்புகிறது, இது பதிலளிக்கும் தன்மை மற்றும் இணக்கத்தன்மையை உறுதி செய்கிறது. இந்த முறைகள் காலாவதியான அட்டவணை அடிப்படையிலான தளவமைப்புகளின் தேவையை நீக்குகிறது மற்றும் வடிவமைப்பில் அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது.

போன்ற CSS அலகுகளை இணைத்தல் vh மற்றும் போன்ற செயல்பாடுகள் calc() ஜாவாஸ்கிரிப்ட் மூலம் டைனமிக் சரிசெய்தல் தளவமைப்பின் வினைத்திறனை மேலும் மேம்படுத்தலாம். இது பல்வேறு சாதனங்கள் மற்றும் திரை அளவுகளில் தடையற்ற பயனர் அனுபவத்தை உறுதிசெய்கிறது, மேலும் வலைப் பயன்பாட்டை மிகவும் வலுவானதாகவும், பயனர் நட்புடனும் ஆக்குகிறது.

எஞ்சியிருக்கும் திரை இடத்தை HTML இல் ஒரு Content Div மூலம் நிரப்புதல்