വെബ് സൈറ്റിലെ സാധാരണ ചോദിക്കുന്ന ചോദ്യം "എങ്ങിനെ ഒരു ഘടകത്തിന്റെ ഉയരം 100% ആയി സജ്ജീകരിക്കും" എന്നതാണ്.
ഇത് വളരെ എളുപ്പമുള്ള ഉത്തരം പോലെ തോന്നിയേക്കാം. ഒരു എലമെൻറിന്റെ ഉയരം 100% ആക്കി നിശ്ചയിക്കാൻ നിങ്ങൾ CSS ഉപയോഗിക്കുന്നു, പക്ഷേ ഇത് എല്ലായ്പ്പോഴും ബ്രൗസർ വിൻഡോയിൽ ഉൾപ്പെടുത്തുന്നതിന് ആ ഘടകത്തെ നീക്കിയിട്ടില്ല. ഇത് സംഭവിക്കുന്നത് എന്തുകൊണ്ടാണെന്നും ഈ വിഷ്വൽ സ്റ്റൈൽ നേടാൻ നിങ്ങൾക്ക് എന്തുചെയ്യാൻ കഴിയുമെന്നും കണ്ടുപിടിക്കാം.
പിക്സൽസും ശതമാനക്കണക്കും
നിങ്ങൾ CSS വസ്തുതയും പിക്സൽ ഉപയോഗിക്കുന്ന ഒരു മൂല്യവും ഉപയോഗിച്ച് ഒരു ഘടകത്തിന്റെ ഉയരം നിർവ്വചിക്കുമ്പോൾ, ആ ഘടകം ബ്രൌസറിൽ വളരെ ലംബ ഇടം എടുക്കും.
ഉദാഹരണത്തിന്, ഒരു ഖണ്ഡിക ഉയരം: 100px; നിങ്ങളുടെ ഡിസൈനിലെ 100 ലധികം പിക്സലുകൾ നിങ്ങളുടെ ഡിസൈനിൽ എടുക്കും. നിങ്ങളുടെ ബ്രൌസർ വിൻഡോ എത്ര വലുതാണെന്നത് പ്രശ്നമല്ല, ഈ ഘടകം ഉയരം 100 പിക്സൽ ആയിരിക്കും.
പിക്സലുകളേക്കാൾ വ്യത്യസ്തമായ വർക്കുകൾ. W3C സ്പെസിഫിക്കേഷൻ അനുസരിച്ച്, കണ്ടെയ്നറിന്റെ ഉയരം സംബന്ധിച്ച് ശതമാന ഉയരം കണക്കുകൂട്ടും. അതിനാൽ നിങ്ങൾ ഒരു ഖണ്ഡിക ഉയരത്തിൽ നൽകിയിട്ടുണ്ടെങ്കിൽ: 50%; 100px ഉയരവുമുള്ള ഒരു div യിൽ, ഖണ്ഡിക 50 പിക്സൽ ഉയരം ആകും, അത് അതിന്റെ ഘടകത്തിന്റെ 50% ആണ്.
ശതമാനം ഉയരം എന്തുകൊണ്ട് പരാജയപ്പെടുന്നു
നിങ്ങൾ ഒരു വെബ്പേജ് രൂപകൽപ്പന ചെയ്തിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് വിൻഡോയുടെ മുഴുവൻ ഉയരം എടുക്കാൻ ആഗ്രഹിക്കുന്ന ഒരു കോളം ഉണ്ട്, സ്വാഭാവികമായ ചെരിവ് ഉയരം കൂട്ടിച്ചേർക്കലാണ്: 100%; ആ ഘടകം. നിങ്ങൾ വീതി എത്തുമ്പോൾ, 100%; മൂലകത്തിന്റെ മുഴുവൻ തിരശ്ചീനമായ സ്ഥലവും എടുക്കും, അതിനാൽ ഉയരം അതേപോലെ പ്രവർത്തിക്കും, വലത്? നിർഭാഗ്യവശാൽ, ഇത് അങ്ങനെയല്ല.
ഇത് സംഭവിക്കുന്നത് എന്താണെന്ന് മനസ്സിലാക്കാൻ ബ്രൗസറുകൾ ഉയരവും വീതിയും വ്യാഖ്യാനിക്കുന്നതെങ്ങനെയെന്ന് നിങ്ങൾ മനസിലാക്കണം. ബ്രൌസർ ജാലകം എത്രത്തോളം തുറന്നു എന്നതിന്റെ ഫങ്ഷനായി ലഭ്യമായ മുഴുവൻ വീതിയും വെബ് ബ്രൗസറുകൾ കണക്കാക്കുന്നു. നിങ്ങളുടെ പ്രമാണങ്ങളിൽ ഏതെങ്കിലും വീതി മൂല്യങ്ങൾ നിങ്ങൾ ക്രമീകരിച്ചിട്ടില്ലെങ്കിൽ, വിൻഡോയുടെ മുഴുവൻ വീതിയും പൂരിപ്പിക്കുന്നതിന് ബ്രൌസർ ഉള്ളടക്കം സ്വപ്രേരിതമായി ഒഴുകും (സ്ഥിരസ്ഥിതി 100% വീതി).
ഉയരം മൂല്യം വീതി വ്യത്യസ്തമായി കണക്കാക്കുന്നു. ഉള്ളടക്കം വളരെ വലുതായി വ്യൂപോർട്ടിന് പുറത്താണ് (അങ്ങനെ സ്ക്രോൾ ബാറുകൾ ആവശ്യമായി വരുന്നത്) അല്ലെങ്കിൽ വെബ് ഡിസൈനർ പേജിൽ ഒരു മൂലകത്തിന് ഒരു പരിപൂർണ്ണ ഉയരം വെച്ചിട്ടുണ്ടെങ്കിൽ ബ്രൌസർ എല്ലാറ്റിനും ഉയരം പരിശോധിക്കുകയില്ല. അല്ലാത്തപക്ഷം, കാഴ്ചപ്പാടുകളുടെ വ്യാപ്തി അവസാനം അവസാനം വരുന്നതുവരെ ബ്രൌസർ ഉള്ളടക്കം ഫ്ലോട്ടിംഗ് അനുവദിക്കുന്നു. ഉയരം യഥാർഥത്തിൽ കണക്കാക്കുന്നില്ല.
ഉയരം ഇല്ലാതെ മാതാപിതാക്കൾ ഘടകങ്ങളുള്ള ഒരു ഘടകത്തിൽ ഒരു ശതമാന ഉയരം സജ്ജമാക്കുമ്പോൾ പ്രശ്നങ്ങൾ ഉണ്ടാകാം - മറ്റൊരു രീതിയിൽ പറഞ്ഞാൽ, പാരന്റ് ഘടകങ്ങൾക്ക് ഒരു സ്ഥിര ഉയരം ഉണ്ട്: യാന്ത്രിക; . നിർവചിക്കാത്ത മൂല്യത്തിൽ നിന്ന് ഒരു ഉയരം കണക്കാക്കാൻ നിങ്ങൾ ബ്രൌസർ ആവശ്യപ്പെടുന്നത് നിങ്ങൾ ഫലത്തിൽ ആയിരിക്കും. ഇത് ഒരു പൂജ്യം മൂല്യം തുല്യമായതിനാൽ, ബ്രൌസർ ഒന്നും ചെയ്യുന്നില്ല.
നിങ്ങളുടെ വെബ് പേജുകളിൽ ഒരു ശതമാനത്തിലേക്ക് ഒരു ഉയരം സെറ്റ് ചെയ്യണമെങ്കിൽ, ഉയരം നിർവചിക്കപ്പെടേണ്ട എല്ലാ ഘടകങ്ങളുടെയും ഉയരം സെറ്റ് ചെയ്യണം. മറ്റൊരുവിധത്തിൽ പറഞ്ഞാൽ, നിങ്ങൾക്ക് ഇതുപോലുള്ള ഒരു പേജ് ഉണ്ടെങ്കിൽ:
ഉള്ളടക്കം ഇവിടെയുണ്ട്
നിങ്ങൾക്ക് ദൈവവും അതിന്റെ ഖണ്ഡികയും അതിൽ 100% ഉയരം ഉണ്ടായിരിക്കണം, പക്ഷേ ആ വസ്തുവിന് രണ്ടു പേരന്റ് ഘടകങ്ങളുണ്ട്:
ഒപ്പം. ആപേക്ഷിക ഉയരം ദേവിയുടെ ഉയരം നിർവ്വചിക്കുന്നതിന് നിങ്ങൾ ബോഡിൻറെയും html ഘടകങ്ങളുടെയും ഉയരം സജ്ജമാക്കിയിരിക്കണം.
അതിനാൽ നിങ്ങൾ ഡിഎഡിൻറെ ഉയരം സെറ്റ് ചെയ്യുവാൻ CSS ഉപയോഗിക്കേണ്ടതുണ്ട്, മാത്രമല്ല ബോഡി, html ഘടകങ്ങൾ. ഇത് ഒരു വെല്ലുവിളി ആയിരിക്കാം, കാരണം നിങ്ങൾക്ക് എല്ലാം പെട്ടെന്ന് 100% ഉയരത്തിൽ സജ്ജമാക്കുമ്പോൾ, ഈ ആവശ്യമുള്ള പ്രഭാവം മാത്രം നേടാൻ കഴിയും.
100% ഹൈറ്റ്സ് ഉപയോഗിച്ച് പ്രവർത്തിക്കുമ്പോൾ ചില കാര്യങ്ങൾ ശ്രദ്ധിക്കുക
ഇപ്പോൾ നിങ്ങളുടെ പേജ് ഘടകങ്ങളുടെ ഉയരം 100% ആക്കി എന്ന് നിങ്ങൾക്കറിയാമെങ്കിലും, നിങ്ങളുടെ എല്ലാ പേജുകളിലേക്കും പുറത്തേക്കു പോകാനും ഇത് ചെയ്യാനും ആവേശകരമാണ്, എന്നാൽ നിങ്ങൾ അറിഞ്ഞിരിക്കേണ്ട ചില കാര്യങ്ങളുണ്ട്:
- നിങ്ങൾക്ക് ആവശ്യമില്ലാത്ത സ്ക്രോൾ ബാർ മാർജിനുകളും പാഡിംഗും ചേർക്കാൻ കഴിയും. ശതമാന നിലവാരത്തിൽ (വീതിയും വീതിയും) പ്രവർത്തിക്കുമ്പോൾ കണ്ടെത്തിയേക്കാവുന്ന ഏറ്റവും വിഷമകരമായ കാര്യങ്ങളിൽ ഒന്ന്, ഒരേ സ്ലൈഡിൽ പാഡ്ഡിംഗും മാർജിനും സ്ക്രോൾ ബാറുകൾ ആവശ്യമില്ലാതെയുള്ള മുഴുവൻ ഉള്ളടക്കവും പ്രദർശിപ്പിക്കുമ്പോൾ പോലും പേജിലേക്ക് സ്ക്രോൾ ബാറുകൾ ചേർക്കാനാകും എന്നതാണ്. കാരണം, മൂലകത്തിന്റെ ഉയരം അല്ലെങ്കിൽ വീതി എന്നത് ആദ്യത്തേതനുസരിച്ച് കണക്കുകൂട്ടുന്നു. പിന്നെ അരികുകളും പിൻഭാഗങ്ങളും ചേർക്കുന്നു. നിങ്ങൾക്ക് 100 പിക്സൽ ഉയരം ഉള്ള ഒരു ഘടകം ഉണ്ടെങ്കിൽ, 10 പിക്സലുകളുടെ മുകളിലും താഴെയുമുള്ള മാർജിൻ ഉണ്ടെങ്കിൽ, 20 പിക്സലുകൾക്ക് ഒരു സ്ക്രോൾ ബാറായിരിക്കും. ഓർക്കുക, ഒരു ഘടകത്തിന്റെ വലിപ്പത്തിൽ മാർജിൻ, ബോർഡർ, പാഡിംഗ് എന്നിവ ചേർത്ത് സിസ് ബോക്സ് മോഡൽ ചേർക്കുന്നു, അതിനാൽ അത്തരം മറ്റ് ബോക്സ് മോഡൽ മൂല്യങ്ങളുമായി 100% 100% ൽ കൂടുതൽ ആയിരിക്കും.
- നിങ്ങളുടെ ഉള്ളടക്കം നിർവ്വചിച്ച ഉയരത്തിൽ കൂടുതൽ എടുക്കുന്നുവെങ്കിൽ, അതിന് ശേഷം മറ്റൊന്നിനെയും അത് പുനരാലേഖനം ചെയ്യും. മറ്റൊരു രീതിയിൽ പറഞ്ഞാൽ, 80% ഉയരം ഉള്ള ഒരു നിര ഉള്ള ഒരു ഡിസൈൻ നിങ്ങൾക്ക് ഉണ്ടെങ്കിൽ, അതിൽ ഉള്ളിലുള്ള ഉള്ളടക്കം 100% വരെ ഉയരും, കൂടാതെ 20% തുടർന്നും നിരയ്ക്ക് ചുവടെ തുടരും കൂടാതെ ദൃശ്യ ഡിസൈൻ നിങ്ങളുടെ പേജിന്റെ. ആ നിരയ്ക്ക് താഴെയുള്ള ഉള്ളടക്കം ഉണ്ടെങ്കിൽ, അതിലെ ടെക്സ്റ്റ് എഴുത്ത് മാത്രം എഴുതാം. ഒരു വെബ് ഡിസൈനർ ഒരു പേജിന്റെ ഉയരം ബലപ്പെടുത്താൻ ശ്രമിക്കുമ്പോൾ അത് ലോഞ്ചിനുവേണ്ടി തികച്ചും പ്രവർത്തിക്കുമ്പോഴും, ആ പേജിലെ ഉള്ളടക്കം ഭാവിയിലെ മാറ്റങ്ങൾ വരുത്തുമ്പോൾ, അവരുടെ സമ്പൂർണ ഉയരങ്ങൾ പൂർണ്ണമായും പേജിന്റെ ഒഴുക്ക് തകർക്കും. നിങ്ങൾ പ്രതികരിക്കുന്ന വെബ്സൈറ്റുകളുടെ നിർമ്മാണത്തിനിടയിൽ ഇത് ശരിയാണ്, അതിന്റെ വീതിയും ഉയരവും വ്യൂപോർട്ട് സൈസ് ഉപയോഗിച്ച് മാറ്റണം.
ഇത് ശരിയാക്കാൻ, നിങ്ങൾക്ക് ഘടകത്തിന്റെ ഉയരം സെറ്റ് ചെയ്യാം. നിങ്ങൾ സ്വയമേവ സെറ്റ് ചെയ്താൽ, അവ ആവശ്യമെങ്കിൽ സ്ക്രോൾ ബാറുകൾ പ്രത്യക്ഷപ്പെടും, അവ ഇല്ലാതാകുമ്പോൾ അപ്രത്യക്ഷമാകും. അത് വിഷ്വൽ ബ്രേക്ക് ശരിയാക്കുന്നു, പക്ഷേ നിങ്ങൾക്ക് അവയെ ആവശ്യമില്ലാത്ത സ്ക്രോൾബാറുകൾ ചേർക്കുന്നു.
വ്യൂപോർട്ട് യൂണിറ്റുകൾ ഉപയോഗിക്കുന്നു
ഈ വെല്ലുവിളി പരിഹരിക്കാനുള്ള മറ്റൊരു മാർഗമാണ് CSS വ്യൂപോർട്ട് യൂണിറ്റുകൾ പരീക്ഷിക്കുക എന്നതാണ്. അളവെടുപ്പിന്റെ വ്യൂപോർട്ട് ഉയരം യൂണിറ്റ് ഉപയോഗിക്കുന്നതിലൂടെ, വ്യൂപോർട്ടിൻറെ നിർദ്ദിഷ്ട ഉയരം എടുക്കാൻ നിങ്ങൾക്ക് സാധിക്കുന്നത്ര വലിപ്പത്തിലുള്ള ഘടകങ്ങൾ കാണാനാകും, അത് കാഴ്ചവക്കുകളുടെ മാറ്റങ്ങളായി മാറും! നിങ്ങളുടെ പേജിൽ നിങ്ങളുടെ 100% ഉയരം വിഷ്വലുകൾ ലഭിക്കാനുള്ള മികച്ച മാർഗമാണ്, പക്ഷെ അവ പല ഉപകരണങ്ങളിലും സ്ക്രീനിന്റെ വലിപ്പത്തിലും ഇരിക്കും.