વેબસાઈટ ડીઝાઇનમાં એક સામાન્ય પ્રશ્ન પૂછવામાં આવે છે "તમે તત્વની ઊંચાઈ 100% કેવી રીતે સેટ કરો"?
આ એક સરળ જવાબ જેવી લાગે છે તમે એક ઘટકની ઊંચાઈ 100% પર સેટ કરવા માટે સી.એસ.એસ. નો ઉપયોગ કરો છો, પરંતુ તે હંમેશા તે તત્વને સમગ્ર બ્રાઉઝર વિન્ડોમાં ફિટ ન કરે. ચાલો આ શા માટે થાય છે તે શોધવા દો અને આ વિઝ્યુઅલ સ્ટાઇલ હાંસલ કરવા માટે તમે શું કરી શકો.
પિક્સેલ્સ અને ટકાવારી
જ્યારે તમે CSS ગુણધર્મનો ઉપયોગ કરીને તત્વની ઊંચાઈ અને પિક્સેલ્સનો ઉપયોગ કરતા મૂલ્યને વ્યાખ્યાયિત કરો છો, ત્યારે તે તત્વ બ્રાઉઝરમાં તે ખૂબ ઊભી જગ્યા લેશે.
ઉદાહરણ તરીકે, ઊંચાઇ સાથે ફકરા: 100 પીએક્સ; તમારા ડિઝાઇનમાં 100 પિક્સેલ ઊભી જગ્યા લેશે. તમારા બ્રાઉઝર વિંડો કેટલું મોટું છે તે મહત્વનું નથી, આ તત્વ ઊંચાઈ 100 પિક્સેલ હશે.
ટકાવારી પિક્સેલ કરતાં અલગ રીતે કામ કરે છે. ડબ્લ્યુ 3સીના સ્પષ્ટીકરણ અનુસાર, ટકાવારીની ઊંચાઇને કન્ટેનરની ઊંચાઇના સંદર્ભમાં ગણવામાં આવે છે. તેથી જો તમે ઊંચાઇ સાથે ફકરો મૂકો: 50%; 100px ની ઊંચાઇ સાથે એક ડિવની અંદર, ફકરો ઊંચાઈ 50 પિક્સેલ હશે, જે તેના પિતૃ તત્વના 50% છે.
શા માટે ટકાવારી હાઇટ્સ નિષ્ફળ
જો તમે કોઈ વેબપેજને ડિઝાઇન કરી રહ્યાં છો, અને તમારી પાસે એક કૉલમ છે જે તમે વિંડોની સંપૂર્ણ ઊંચાઇ લઇ શકો છો, તો કુદરતી ઝોક ઊંચાઇ ઉમેરવાનું છે: 100%; તે તત્વ માટે છેવટે, જો તમે પહોળાઈને પહોળાઈ પર સેટ કરો તો: 100%; તત્વ પૃષ્ઠની સંપૂર્ણ આડી જગ્યા લેશે, તેથી ઊંચાઇ એ જ કામ કરે છે, બરાબર ને? કમનસીબે, આ કિસ્સો નથી.
આ શા માટે થાય છે તે સમજવા માટે, તમારે સમજવું આવશ્યક છે કે કેવી રીતે બ્રાઉઝર્સ ઉંચાઈ અને પહોળાઈનું નિર્દેશન વેબ બ્રાઉઝર્સ કુલ ઉપલબ્ધ પહોળાઈની ગણતરી કરે છે કે બ્રાઉઝર વિંડો કેટલી ખુલ્લી છે તેના વિધેય તરીકે. જો તમે તમારા દસ્તાવેજો પર કોઈપણ પહોળાઈ મૂલ્યો સેટ કરતા નથી, તો બ્રાઉઝર વિંડોની સમગ્ર પહોળાઈ (100% પહોળાઈ મૂળભૂત છે) ભરવા માટે આપમેળે સામગ્રીને પ્રવાહ કરશે.
ઊંચાઈની કિંમત પહોળાઈ કરતાં અલગ રીતે ગણવામાં આવે છે. વાસ્તવમાં, બ્રાઉઝર્સ ઊંચાઈનું મૂલ્યાંકન કરતા નથી જ્યાં સુધી સામગ્રી એટલી લાંબી ન હોય કે તે વ્યૂપોર્ટની બહાર જાય છે (આમ સ્ક્રોલ બારની જરૂર હોય છે) અથવા વેબ ડિઝાઇનર પૃષ્ઠ પર કોઈ તત્વ માટે ચોક્કસ ઊંચાઈ સુયોજિત કરે છે. નહિંતર, બ્રાઉઝર અંતમાં આવે ત્યાં સુધી વ્યૂપોર્ટની પહોળાઇની અંદર ફક્ત સામગ્રી પ્રવાહની સુવિધા આપે છે. ઊંચાઈ વાસ્તવમાં ગણતરીમાં નથી.
જ્યારે તમે તત્વ પર ઊંચાઇને સેટ કરો છો ત્યારે પિતૃ ઘટકોની ઉંચાઈ વગર સુયોજિત કરે છે - બીજા શબ્દોમાં, પિતૃ તત્વોની મૂળભૂત ઊંચાઇ છે: ઓટો; . તમે અસરકારક રીતે, બ્રાઉઝરને એક અવ્યાખ્યાયિત મૂલ્યથી ઊંચાઈની ગણતરી કરવા કહી રહ્યા છો. તે નલ-વેલ્યુ જેટલું હશે, પરિણામ એ છે કે બ્રાઉઝર કશું જ નથી.
જો તમે ટકાવારી માટે તમારા વેબપૃષ્ઠો પર ઊંચાઇ સેટ કરવા માંગતા હો, તો તમારે તે નક્કી કરેલા દરેક પિતૃ તત્વની ઊંચાઇને સેટ કરવી પડશે જે તમે ઊંચાઇને વ્યાખ્યાયિત કરવા માગો છો. અન્ય શબ્દોમાં કહીએ તો, જો તમારી પાસે આના જેવું પૃષ્ઠ છે:
અહીં સામગ્રી
તમે કદાચ div અને ફકરોને 100% ઉંચાઈ ધરાવવાની ઇચ્છા રાખો છો, પરંતુ તે ભાગમાં વાસ્તવમાં બે મુખ્ય ઘટકો છે:
અને. એક સંબંધિત ઉંચાઈને DIV ની ઊંચાઈ વ્યાખ્યાયિત કરવા માટે, તમારે શરીર અને HTML ઘટકોની ઊંચાઈ તેમજ સેટ કરવી પડશે.
તેથી તમારે માત્ર div ની ઊંચાઈ, પણ શરીર અને HTML ઘટકોને સેટ કરવા માટે CSS નો ઉપયોગ કરવાની જરૂર પડશે. આ એક પડકાર બની શકે છે, કારણ કે તમે 100% ઊંચાઈ પર સેટ થઈને ઝડપથી ભરાઈ શકો છો, ફક્ત આ ઇચ્છિત અસર હાંસલ કરવા માટે.
100% હાઇટ્સ સાથે કામ કરતી વખતે નોંધ લેવા માટેની કેટલીક વસ્તુઓ
હવે તમે જાણો છો કે તમારા પૃષ્ઠ ઘટકોની ઊંચાઈને 100% કેવી રીતે સેટ કરવી, તે બહાર જવા માટે તમારા બધા પૃષ્ઠોને ઉત્તેજક બનાવી શકે છે, પરંતુ કેટલીક બાબતો છે જેને તમારે જાણ કરવી જોઈએ:
- માર્જિન્સ અને પેડિંગ સ્ક્રોલ બારને ઉમેરી શકે છે જ્યાં તમે કોઈ ન ઇચ્છતા હોવ. ટકાવારી ઊંચાઈ (અને પહોળાઈ) સાથે કામ કરતા મેં સૌથી વધુ હેરાન કરેલા વસ્તુઓમાંની એક એવી છે કે તે પછી તે જ ઘટકો પર ગાદી અને માર્જિન પૃષ્ઠ પર સ્ક્રોલ બાર ઉમેરી શકે છે, ભલે સ્ક્રોલ બારની જરૂર વગર બધી સામગ્રી પ્રદર્શિત થાય છે આ કારણ છે કે તત્વની ઉંચાઈ અથવા પહોળાઈ એ પ્રથમ વસ્તુ છે જે ગણતરીમાં લેવામાં આવે છે. પછી માર્જિન અને પેડિંગ્સ પર ઉમેરવામાં આવે છે. તેથી જો તમારી પાસે 100% ની ઉંચાઈ અને દરેક 10 પિક્સેલની ઉપર અને નીચે માર્જિન હોય તો, વધારાની 20 પિક્સેલ્સ માટે સ્ક્રોલ બાર હશે. યાદ રાખો કે, સીએસએસ બોક્સ મોડેલ એગ્રીન, સરહદ, અને પેડિંગ એલિમેન્ટના કદ પર ઉમેરે છે, તેથી તે અન્ય કોઈપણ બોક્સ મોડલ મૂલ્યથી 100% વાસ્તવમાં 100% થી વધુ હશે.
- જો તમારી સામગ્રી નિર્ધારિત ઊંચાઈ કરતાં વધુ લે છે, તો તે તેના પછી કંઈપણ ફરીથી લખશે. બીજા શબ્દોમાં કહીએ તો, જો તમારી પાસે એક કળા છે જે ઊંચાઇમાં 80% છે અને તેની અંદરની સામગ્રી ઊંચાઈની 100% જેટલી લાગી જશે, તો વધારાની 20% કૉલમની નીચે ચાલુ રહેશે અને દ્રશ્ય ડિઝાઇનને તોડશે તમારા પૃષ્ઠની જો ત્યાં તે સ્તંભની નીચે સામગ્રી છે, તો ટેક્સ્ટ ફક્ત તેની ટોચ પર લખશે હું ઘણી વાર આ જુઓ ત્યારે થાય છે જ્યારે કોઈ વેબ ડિઝાઇનર પૃષ્ઠની ઊંચાઈ પર દબાણ કરવા માટે પ્રયત્ન કરે છે અને તેને લોન્ચ કરવા માટે સંપૂર્ણપણે કાર્ય કરે છે, પરંતુ જ્યારે તે પૃષ્ઠ પરની સામગ્રી ભવિષ્યમાં બદલાય છે, ત્યારે તેની સંપૂર્ણ ઊંચાઈ સંપૂર્ણપણે પૃષ્ઠના પ્રવાહને તોડે છે. આ બમણું સાચું છે જ્યારે તમે પ્રતિસાદશીલ વેબસાઇટ્સ બનાવી રહ્યા હો, જેની પહોળાઈ અને ઊંચાઈ વ્યૂપોર્ટના કદ સાથે બદલાવવી આવશ્યક છે.
આને ઠીક કરવા માટે, તમે તત્વની ઊંચાઈ તેમજ સેટ કરી શકો છો. જો તમે તેને ઓટો પર સેટ કરો છો, તો સ્ક્રોલ બાર દેખાશે જો તે જરૂરી હોય પરંતુ અદૃશ્ય થઈ જાય ત્યારે તે અદૃશ્ય થઈ જાય. તે વિઝ્યુઅલ બ્રેકને સુધારે છે, પરંતુ તે સ્ક્રોલબારને ઉમેરે છે જ્યાં તમે તેમને ન જોઈ શકો.
વ્યૂપોર્ટ એકમોનો ઉપયોગ કરવો
આ પડકારનો સામનો કરવા માટેનો બીજો રસ્તો એ છે કે CSS વ્યૂપોર્ટ એકમો સાથે પ્રયોગ કરવો. માપનની વ્યૂપોર્ટ ઉંચાઈ એકમનો ઉપયોગ કરીને, તમે વ્યૂપોર્ટની નિર્ધારિત ઊંચાઇ લેવા માટે કદના ઘટકો બનાવી શકો છો અને તે વ્યૂપોર્ટના ફેરફારો તરીકે બદલાઈ જશે! આ પૃષ્ઠ પર તમારી 100% ઉંચાઈની દૃશ્યો મેળવવાની એક સરસ રીત છે પરંતુ હજી પણ તે વિવિધ ઉપકરણો અને સ્ક્રીન કદ માટે લવચીક છે.