HTML-ലെ ഒരു ഉള്ളടക്ക

Jules David

2024, ജൂലൈ 16, ചൊവ്വാഴ്ച 6:39:03 PM

പൂർണ്ണ ഉയരമുള്ള ഉള്ളടക്കത്തിനായി ലേഔട്ടുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നു

മുഴുവൻ സ്‌ക്രീൻ സ്‌പെയ്‌സും ഫലപ്രദമായി ഉപയോഗിക്കുന്ന ഒരു വെബ് ആപ്ലിക്കേഷൻ സൃഷ്‌ടിക്കുന്നത് ഒരു സാധാരണ വെല്ലുവിളിയാണ്. ഉള്ളടക്കം മുഴുവൻ സ്‌ക്രീനിൻ്റെയും ഉയരം നിറയ്ക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ, പ്രത്യേകിച്ച് ഡൈനാമിക് ഹെഡർ ഉള്ളപ്പോൾ, ശ്രദ്ധാപൂർവമായ ആസൂത്രണവും നടപ്പിലാക്കലും ആവശ്യമാണ്. തലക്കെട്ടിൽ പലപ്പോഴും ലോഗോകളും അക്കൗണ്ട് വിവരങ്ങളും പോലുള്ള അവശ്യ ഘടകങ്ങൾ അടങ്ങിയിരിക്കുന്നു, അതിൻ്റെ ഉയരം വ്യത്യാസപ്പെടാം.

പട്ടികകളെ ആശ്രയിക്കാതെ, ശേഷിക്കുന്ന സ്‌ക്രീൻ സ്‌പെയ്‌സ് ഉള്ളടക്ക ഡിവിയെ ഉൾക്കൊള്ളിക്കുക എന്നതാണ് ലക്ഷ്യം. ഇത് തന്ത്രപരമായിരിക്കും, പ്രത്യേകിച്ചും ഉള്ളടക്ക ഡിവിയുടെ ഉള്ളിലെ ഘടകങ്ങൾ ശതമാനം ഉയരങ്ങളുമായി പൊരുത്തപ്പെടേണ്ടിവരുമ്പോൾ. ആധുനിക 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 ശേഷിക്കുന്ന സ്ഥലം പൂരിപ്പിക്കാൻ. ഈ സമീപനം, തലക്കെട്ടിൻ്റെ ഉയരം പരിഗണിക്കാതെ, ശേഷിക്കുന്ന ഉയരം ഉൾക്കൊള്ളാൻ ഉള്ളടക്കം ഡൈനാമിക് ആയി ക്രമീകരിക്കുന്നു. ദി overflow: auto ഓവർഫ്ലോ പ്രശ്‌നങ്ങളില്ലാതെ വൃത്തിയുള്ള ലേഔട്ട് നിലനിർത്തിക്കൊണ്ട്, കാണാവുന്ന സ്ഥലത്തെ ഉള്ളടക്കം കവിയുന്നുവെങ്കിൽ, ഉള്ളടക്ക ഡിവിയെ സ്ക്രോൾ ചെയ്യാൻ പ്രോപ്പർട്ടി അനുവദിക്കുന്നു.

രണ്ടാമത്തെ തിരക്കഥയിൽ, CSS Grid ലേഔട്ടിന് വേണ്ടി പ്രവർത്തിക്കുന്നു. ദി container ക്ലാസ് സജ്ജീകരിച്ചിരിക്കുന്നു display: grid കൂടെ grid-template-rows: auto 1fr. ഇത് രണ്ട് വരികളുള്ള ഒരു ഗ്രിഡ് സൃഷ്ടിക്കുന്നു: ആദ്യ വരി (തലക്കെട്ട്) അതിൻ്റെ ഉയരം യാന്ത്രികമായി ക്രമീകരിക്കുന്നു, രണ്ടാമത്തെ വരി (ഉള്ളടക്കം) ശേഷിക്കുന്ന ഇടം നിറയ്ക്കുന്നു. ഫ്ലെക്‌സ്‌ബോക്‌സ് ഉദാഹരണത്തിന് സമാനമായി, ഉള്ളടക്ക ഡിവിക്ക് ഒരു ഉണ്ട് overflow: auto ഓവർഫ്ലോ ഉള്ളടക്കം ഭംഗിയായി കൈകാര്യം ചെയ്യാനുള്ള പ്രോപ്പർട്ടി. രണ്ട് രീതികളും ടേബിളുകളുടെ ആവശ്യം ഇല്ലാതാക്കുന്നു, ആധുനിക CSS ലേഔട്ട് ടെക്നിക്കുകൾ പ്രയോജനപ്പെടുത്തി ഫ്ലെക്സിബിളും റെസ്‌പോൺസീവ് ഡിസൈനും നേടുന്നു, അത് വ്യത്യസ്ത തലക്കെട്ട് ഉയരങ്ങളുമായി ക്രമീകരിക്കുകയും ഉള്ളടക്കം പേജിൻ്റെ ബാക്കി ഭാഗങ്ങളിൽ നിറയുന്നത് ഉറപ്പാക്കുകയും ചെയ്യുന്നു.

ശേഷിക്കുന്ന സ്‌ക്രീൻ സ്പേസ് ഒരു ഡിവി ഫിൽ നിർമ്മിക്കാൻ ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിക്കുന്നു

Flexbox ഉപയോഗിച്ച് 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 വ്യത്യസ്‌ത സ്‌ക്രീൻ വലുപ്പങ്ങളിലുടനീളം സ്ഥിരമായ ലേഔട്ട് സ്വഭാവം നിലനിർത്താൻ യൂണിറ്റുകൾ സഹായിക്കുന്നു.

കൂടുതൽ സങ്കീർണ്ണമായ ലേഔട്ടുകൾക്ക്, മൂലകങ്ങളുടെ ഉയരം ചലനാത്മകമായി കണക്കാക്കാനും ക്രമീകരിക്കാനും JavaScript ഉപയോഗിക്കാവുന്നതാണ്. വിൻഡോയുടെ വലുപ്പം മാറ്റുന്ന ഇവൻ്റിലേക്ക് ഇവൻ്റ് ലിസണർമാരെ അറ്റാച്ചുചെയ്യുന്നതിലൂടെ, വിൻഡോ വലുപ്പം മാറുമ്പോഴെല്ലാം നിങ്ങൾക്ക് ഉള്ളടക്ക ഡിവിയുടെ ഉയരം വീണ്ടും കണക്കാക്കാം. ഈ രീതി കൂടുതൽ ഫ്ലെക്സിബിലിറ്റി പ്രദാനം ചെയ്യുന്നു കൂടാതെ വ്യത്യസ്ത തലക്കെട്ട് ഉയരങ്ങളും ഡൈനാമിക് ഉള്ളടക്കവും കൈകാര്യം ചെയ്യാൻ കഴിയും. CSS-മായി JavaScript സംയോജിപ്പിക്കുന്നത്, നിങ്ങളുടെ ലേഔട്ട് പ്രതികരണശേഷിയുള്ളതും വ്യത്യസ്ത സ്‌ക്രീൻ വലുപ്പങ്ങൾക്കും ഉള്ളടക്ക മാറ്റങ്ങൾക്കും അനുയോജ്യമാണെന്നും ഉറപ്പാക്കുന്നു, വെബ് ആപ്ലിക്കേഷനുകളിലെ പൂർണ്ണ-ഉയരത്തിലുള്ള ഉള്ളടക്ക വിഭാഗങ്ങൾക്ക് ശക്തമായ പരിഹാരം വാഗ്ദാനം ചെയ്യുന്നു.

പൂർണ്ണ ഉയരമുള്ള ഉള്ളടക്ക ലേഔട്ടുകൾക്കുള്ള പൊതുവായ ചോദ്യങ്ങളും പരിഹാരങ്ങളും

ഡൈനാമിക് ഹൈറ്റുകൾക്കായി എനിക്ക് എങ്ങനെ calc() ഫംഗ്ഷൻ ഉപയോഗിക്കാം?
ദി calc() പോലുള്ള CSS പ്രോപ്പർട്ടി മൂല്യങ്ങൾ നിർണ്ണയിക്കാൻ കണക്കുകൂട്ടലുകൾ നടത്താൻ ഫംഗ്ഷൻ നിങ്ങളെ അനുവദിക്കുന്നു height: calc(100vh - 50px) 50px തലക്കെട്ട് കണക്കാക്കാൻ.
CSS ലെ vh യൂണിറ്റ് എന്താണ്?
ദി vh യൂണിറ്റ് വ്യൂപോർട്ട് ഉയരം, എവിടെ 1vh വ്യൂപോർട്ടിൻ്റെ ഉയരത്തിൻ്റെ 1% തുല്യമാണ്, ഇത് പ്രതികരണാത്മക രൂപകൽപ്പനയ്ക്ക് ഉപയോഗപ്രദമാക്കുന്നു.
ഡൈനാമിക് ഹെഡർ ഉയരങ്ങൾ എങ്ങനെ കൈകാര്യം ചെയ്യാം?
തലക്കെട്ടിൻ്റെ ഉയരം അളക്കുന്നതിനും ഉള്ളടക്ക ഡിവിയുടെ ഉയരം അതിനനുസരിച്ച് ക്രമീകരിക്കുന്നതിനും JavaScript ഉപയോഗിക്കുക, ശേഷിക്കുന്ന ഇടം ചലനാത്മകമായി നിറയ്ക്കുന്നുവെന്ന് ഉറപ്പാക്കുക.
ഫ്ലെക്സ്ബോക്സും ഗ്രിഡും സംയോജിപ്പിക്കാൻ കഴിയുമോ?
അതെ, നിങ്ങൾക്ക് സംയോജിപ്പിക്കാൻ കഴിയും Flexbox ഒപ്പം Grid വ്യത്യസ്ത ലേഔട്ട് ആവശ്യകതകൾക്കായി ഒരേ പ്രോജക്റ്റിനുള്ളിലെ ലേഔട്ടുകൾ അവയുടെ ശക്തി പ്രയോജനപ്പെടുത്തുന്നു.
ഉള്ളടക്ക വിഭാഗത്തിലെ സ്ക്രോളബിലിറ്റി ഞാൻ എങ്ങനെ ഉറപ്പാക്കും?
ഉള്ളടക്ക വിഭാഗങ്ങൾ സജ്ജമാക്കുക overflow സ്വത്ത് auto ഉള്ളടക്കം ഡിവിയുടെ ഉയരം കവിയുമ്പോൾ സ്ക്രോൾബാറുകൾ ചേർക്കാൻ.
ലേഔട്ട് ക്രമീകരിക്കുന്നതിന് JavaScript ഉപയോഗിക്കുന്നതിൻ്റെ പ്രയോജനങ്ങൾ എന്തൊക്കെയാണ്?
ജാവാസ്ക്രിപ്റ്റ് തത്സമയ ക്രമീകരണങ്ങളും ചലനാത്മക ഉള്ളടക്കവും വ്യത്യസ്ത ഘടകങ്ങളുടെ വലുപ്പങ്ങളും കൈകാര്യം ചെയ്യുന്നതിനുള്ള വഴക്കവും നൽകുന്നു, ഇത് ലേഔട്ടിൻ്റെ പ്രതികരണശേഷി വർദ്ധിപ്പിക്കുന്നു.
ലേഔട്ടിനായി പട്ടികകൾ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കാൻ കഴിയുമോ?
അതെ, ആധുനിക CSS ലേഔട്ട് ടെക്നിക്കുകൾ പോലെ Flexbox ഒപ്പം Grid പരമ്പരാഗത പട്ടിക അടിസ്ഥാനമാക്കിയുള്ള ലേഔട്ടുകളേക്കാൾ കൂടുതൽ വഴക്കമുള്ളതും പ്രതികരിക്കുന്നതുമായ പരിഹാരങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു.
CSS ഗ്രിഡ് ഉപയോഗിച്ച് ശേഷിക്കുന്ന ഉയരം എങ്ങനെ പൂരിപ്പിക്കാം?
ഗ്രിഡ് കണ്ടെയ്നർ സജ്ജമാക്കുക grid-template-rows: auto 1fr, രണ്ടാമത്തെ വരി (ഉള്ളടക്കം) ആയി സജ്ജീകരിച്ചിരിക്കുന്നു 1fr ശേഷിക്കുന്ന ഉയരം നിറയ്ക്കാൻ.
ഫുൾ-ഹൈറ്റ് ലേഔട്ടുകളിൽ 100vh യൂണിറ്റ് എന്ത് പങ്കാണ് വഹിക്കുന്നത്?
ദി 100vh യൂണിറ്റ് വ്യൂപോർട്ടിൻ്റെ മുഴുവൻ ഉയരത്തെയും പ്രതിനിധീകരിക്കുന്നു, വ്യൂപോർട്ടിൻ്റെ വലുപ്പത്തെ അടിസ്ഥാനമാക്കി ഘടകങ്ങളെ പ്രതികരിക്കാൻ അനുവദിക്കുന്നു.
പ്രതികരിക്കുന്ന ലേഔട്ടുകൾക്കായി എനിക്ക് മിനി-ഹൈറ്റ് ഉപയോഗിക്കാമോ?
അതെ, ഉപയോഗിക്കുന്നു min-height ഒരു മൂലകത്തിൻ്റെ ഏറ്റവും കുറഞ്ഞ ഉയരം നിലനിർത്തുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, ഇത് ഉള്ളടക്ക ഓവർഫ്ലോ നിയന്ത്രിക്കാനും ലേഔട്ട് സ്ഥിരത നിലനിർത്താനും സഹായിക്കും.

ലേഔട്ട് ടെക്നിക്കുകൾ പൊതിയുന്നു

പോലുള്ള ആധുനിക CSS സാങ്കേതിക വിദ്യകൾ പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ Flexbox ഒപ്പം Grid, വെബ് ഡെവലപ്പർമാർക്ക് ഫലപ്രദമായി ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ കഴിയും, അവിടെ ഒരു ഉള്ളടക്ക ഡിവി ശേഷിക്കുന്ന സ്‌ക്രീൻ സ്പേസ് നിറയ്ക്കുന്നു, പ്രതികരണശേഷിയും പൊരുത്തപ്പെടുത്തലും ഉറപ്പാക്കുന്നു. ഈ രീതികൾ കാലഹരണപ്പെട്ട പട്ടിക അടിസ്ഥാനമാക്കിയുള്ള ലേഔട്ടുകളുടെ ആവശ്യകത ഇല്ലാതാക്കുകയും ഡിസൈനിൽ കൂടുതൽ വഴക്കം നൽകുകയും ചെയ്യുന്നു.

പോലുള്ള CSS യൂണിറ്റുകൾ സംയോജിപ്പിക്കുന്നു vh തുടങ്ങിയ പ്രവർത്തനങ്ങളും calc() ചലനാത്മക ക്രമീകരണങ്ങൾക്കായി JavaScript ഉപയോഗിച്ച് ലേഔട്ടിൻ്റെ പ്രതികരണശേഷി കൂടുതൽ മെച്ചപ്പെടുത്താൻ കഴിയും. ഇത് വ്യത്യസ്‌ത ഉപകരണങ്ങളിലും സ്‌ക്രീൻ വലുപ്പത്തിലും ഉടനീളം തടസ്സമില്ലാത്ത ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കുന്നു, ഇത് വെബ് ആപ്ലിക്കേഷനെ കൂടുതൽ കരുത്തുറ്റതും ഉപയോക്തൃ സൗഹൃദവുമാക്കുന്നു.

HTML-ലെ ഒരു ഉള്ളടക്ക ഡിവിഷൻ ഉപയോഗിച്ച് ശേഷിക്കുന്ന സ്‌ക്രീൻ ഇടം പൂരിപ്പിക്കുന്നു