ਇਕ ਐਚਐਮਐਲ ਐਲੀਮੈਂਟ ਦੀ ਉਚਾਈ ਨੂੰ 100% ਸੈਟ ਕਰਨ ਲਈ CSS ਦਾ ਇਸਤੇਮਾਲ ਕਿਵੇਂ ਕਰਨਾ ਹੈ

ਵੈੱਬਸਾਈਟ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਇੱਕ ਆਮ ਪੁੱਛੇ ਜਾਂਦੇ ਪ੍ਰਸ਼ਨ "ਤੁਸੀਂ ਇੱਕ ਤੱਤ ਦੀ ਉਚਾਈ 100% ਤੱਕ ਕਿਵੇਂ ਸੈਟ ਕਰਦੇ ਹੋ"?

ਇਹ ਆਸਾਨ ਜਵਾਬ ਜਾਪ ਸਕਦਾ ਹੈ. ਤੁਸੀਂ ਇੱਕ ਤੱਤ ਦੀ ਉਚਾਈ ਨੂੰ 100% ਤੱਕ ਸੈਟ ਕਰਨ ਲਈ CSS ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਪਰ ਇਹ ਹਮੇਸ਼ਾ ਉਹ ਤੱਤ ਪੂਰੀ ਬਰਾਊਜ਼ਰ ਵਿੰਡੋ ਵਿੱਚ ਫਿੱਟ ਨਹੀਂ ਕਰਦਾ. ਆਓ ਇਹ ਜਾਣੀਏ ਕਿ ਇਹ ਕਿਉਂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਤੁਸੀਂ ਇਸ ਵਿਜ਼ੂਅਲ ਸਟਾਈਲ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ.

ਪਿਕਸਲ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ

ਜਦੋਂ ਤੁਸੀਂ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇਕ ਐਲੀਮੈਂਟ ਦੀ ਉਚਾਈ ਅਤੇ ਪਿਕਸਲ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੀ ਵੈਲਯੂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ, ਤਾਂ ਉਹ ਤੱਤ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਬਹੁਤ ਲੰਬਾ ਥਾਂ ਖੋਹ ਲਵੇਗਾ.

ਉਦਾਹਰਣ ਵਜੋਂ, ਇਕ ਉਚਾਈ ਵਾਲਾ ਪੈਰਾ: 100 ਪੈਕਸ; ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਵਿਚ 100 ਪਿਕਸਲ ਲੰਬਿਤ ਥਾਂ ਨੂੰ ਲੈ ਲਵੇਗਾ. ਇਸ ਨਾਲ ਕੋਈ ਫਰਕ ਨਹੀਂ ਪੈਂਦਾ ਕਿ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਕਿੰਨੀ ਵੱਡੀ ਹੈ, ਇਹ ਤੱਤ 100 ਇੰਚ ਲੰਬੇ ਹੋਵੇਗਾ

ਪ੍ਰਤੀਸ਼ਤਤਾ ਪਿਕਸਲ ਨਾਲੋਂ ਵੱਖਰੇ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ ਡਬਲਯੂ ਐੱਸ ਸੀ ਦੇ ਨਿਰਦੇਸ਼ ਅਨੁਸਾਰ, ਪ੍ਰਤੀਸ਼ਤ ਦੀ ਉਚਾਈਆਂ ਨੂੰ ਕੰਟੇਨਰ ਦੀ ਉਚਾਈ ਦੇ ਸਬੰਧ ਵਿੱਚ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ. ਇਸ ਲਈ ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਉਚਾਈ ਦੇ ਪੈਰਾਗ੍ਰਾਫ਼ ਨੂੰ: 50%; 100px ਦੀ ਉਚਾਈ ਵਾਲੀ ਇਕ ਅੰਦਰੂਨੀ ਅੰਦਰ, ਪੈਰਾ ਉਚਾਈ ਵਿੱਚ 50 ਪਿਕਸਲ ਹੋ ਜਾਵੇਗਾ, ਜੋ ਕਿ ਉਸਦੇ ਮੂਲ ਤੱਤ ਦਾ 50% ਹੈ.

ਕਿਉਂ ਪ੍ਰਤੀਸ਼ਤ ਹਾਈਟਸ ਅਸਫਲ

ਜੇ ਤੁਸੀਂ ਕਿਸੇ ਵੈਬਪੇਜ ਨੂੰ ਡਿਜ਼ਾਈਨ ਕਰ ਰਹੇ ਹੋ, ਅਤੇ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਕਾਲਮ ਹੈ ਜਿਸਨੂੰ ਤੁਸੀਂ ਖਿੜਕੀ ਦੀ ਪੂਰੀ ਉਚਾਈ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਕੁਦਰਤੀ ਝੁਕਾਅ ਉੱਚਾਈ ਨੂੰ ਜੋੜਨਾ: 100%; ਉਸ ਤੱਤ ਨੂੰ ਆਖਰਕਾਰ, ਜੇ ਤੁਸੀਂ ਚੌੜਾਈ ਨੂੰ ਚੌੜਾਈ ਤੇ ਸੈੱਟ ਕਰਦੇ ਹੋ: 100%; ਤੱਤ ਪੇਜ ਦੀ ਪੂਰੀ ਖਿਤਿਜੀ ਥਾਂ ਨੂੰ ਖੋਲੇਗਾ, ਇਸਲਈ ਉਚਾਈ ਉਸੇ ਕੰਮ ਕਰੇ, ਠੀਕ? ਬਦਕਿਸਮਤੀ ਨਾਲ, ਇਹ ਮਾਮਲਾ ਬਿਲਕੁਲ ਨਹੀਂ ਹੈ.

ਇਹ ਸਮਝਣ ਲਈ ਕਿ ਅਜਿਹਾ ਕਿਉਂ ਹੁੰਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਇਹ ਸਮਝਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੀ ਉੱਚਾਈ ਅਤੇ ਚੌੜਾਈ ਦੀ ਵਿਆਖਿਆ ਕਿਵੇਂ ਹੈ. ਵੈਬ ਬ੍ਰਾਊਜ਼ਰ ਕੁੱਲ ਉਪਲੱਬਧ ਚੌੜਾਈ ਨੂੰ ਫੋਕਸ ਦੇ ਤੌਰ ਤੇ ਗਿਣਦੇ ਹਨ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਕਿੰਨੀ ਖੁੱਲੀ ਹੈ ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ਾਂ ਤੇ ਕੋਈ ਚੌੜਾਈ ਮੁੱਲ ਸੈਟ ਨਹੀਂ ਕਰਦੇ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਦੀ ਪੂਰੀ ਚੌੜਾਈ ਨੂੰ ਭਰਨ ਲਈ ਸਮੱਗਰੀ ਨੂੰ ਆਟੋਮੈਟਿਕਲੀ ਫਲੋ ਦੇਵੇਗਾ (100% ਚੌੜਾਈ ਮੂਲ ਹੈ).

ਉਚਾਈ ਦੀ ਮਾਨਤਾ ਚੌੜਾਈ ਤੋਂ ਅਲਗ ਅਲਗ ਕੀਤੀ ਗਈ ਹੈ. ਵਾਸਤਵ ਵਿੱਚ, ਬਰਾਊਜ਼ਰ ਬਿਲਕੁਲ ਉਚਾਈ ਦਾ ਮੁਲਾਂਕਣ ਨਹੀਂ ਕਰਦੇ ਜਦੋਂ ਤੱਕ ਸਮੱਗਰੀ ਇੰਨੇ ਲੰਬੇ ਨਹੀਂ ਹੁੰਦੀ ਕਿ ਇਹ ਵਿਊਪੋਰਟ ਤੋਂ ਬਾਹਰ ਜਾਂਦੀ ਹੈ (ਇਸ ਲਈ ਸਕਾਲ ਬਾਰਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ) ਜਾਂ ਜੇਕਰ ਵੈੱਬ ਡਿਜ਼ਾਇਨਰ ਸਫ਼ੇ ਤੇ ਇੱਕ ਐਲੀਮੈਂਟ ਲਈ ਪੂਰੀ ਉਚਾਈ ਸੈਟ ਕਰਦਾ ਹੈ. ਨਹੀਂ ਤਾਂ, ਬ੍ਰਾਊਜ਼ਰ ਵਿਊਪੋਰਟ ਦੀ ਚੌੜਾਈ ਵਿੱਚ ਸਮਗਰੀ ਦੀ ਪ੍ਰਕ੍ਰਿਆ ਨੂੰ ਸਿਰਫ਼ ਅੰਤ ਤੱਕ ਨਹੀਂ ਆਉਣ ਦਿੰਦਾ ਹੈ ਉਚਾਈ ਅਸਲ ਵਿੱਚ ਬਿਲਕੁਲ ਨਹੀਂ ਗਿਣੀ ਗਈ ਹੈ.

ਸਮੱਸਿਆ ਉਦੋਂ ਵਾਪਰਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਤੱਤ ਦੀ ਪ੍ਰਤੀਸ਼ਤ ਦੀ ਉਚਾਈ ਸੈਟ ਕਰਦੇ ਹੋ ਜਿਸਦਾ ਮੂਲ ਤੱਤ ਮੂਲ ਤੱਤ ਹੁੰਦੇ ਹਨ - ਦੂਜੇ ਸ਼ਬਦਾਂ ਵਿੱਚ, ਮੂਲ ਤੱਤਾਂ ਦੀ ਇੱਕ ਡਿਫੌਲਟ ਉਚਾਈ ਹੁੰਦੀ ਹੈ: ਆਟੋ; . ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ, ਬਰਾਊਜ਼ਰ ਨੂੰ ਇੱਕ ਪ੍ਰਭਾਸ਼ਿਤ ਮੁੱਲ ਤੋਂ ਉਚਾਈ ਦੀ ਗਿਣਤੀ ਕਰਨ ਲਈ ਕਹਿ ਰਹੇ ਹੋ. ਕਿਉਕਿ ਇੱਕ ਬੇਅਰਲ-ਮੁੱਲ ਦੇ ਬਰਾਬਰ ਹੋਵੇਗਾ, ਨਤੀਜਾ ਇਹ ਹੁੰਦਾ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਕੁਝ ਨਹੀਂ ਕਰਦਾ.

ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਵੈਬ ਪੇਜਾਂ ਦੀ ਪ੍ਰਤੀਸ਼ਤਤਾ ਤੇ ਇੱਕ ਉਚਾਈ ਨਿਰਧਾਰਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਉਸ ਹਰ ਇੱਕ ਮੂਲ ਤੱਤਾਂ ਦੀ ਉਚਾਈ ਨਿਰਧਾਰਤ ਕਰਨੀ ਪਵੇਗੀ ਜਿਸਦੀ ਤੁਸੀਂ ਉਚਾਈ ਨਿਰਧਾਰਤ ਕਰਨੀ ਚਾਹੁੰਦੇ ਹੋ. ਦੂਜੇ ਸ਼ਬਦਾਂ ਵਿਚ, ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਅਜਿਹਾ ਸਫ਼ਾ ਹੈ:





ਇੱਥੇ ਸਮੱਗਰੀ



ਤੁਸੀਂ ਸੰਭਾਵਨਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿ Div ਅਤੇ ਪੈਰਾਗ੍ਰਾਫ ਵਿੱਚ 100% ਉਚਾਈ ਹੋਵੇ, ਪਰ ਅਸਲ ਵਿੱਚ ਉਹ ਡਵੀਜ਼ਨ ਵਿੱਚ ਦੋ ਮਾਪੇ ਹਨ:

ਅਤੇ. ਇੱਕ ਡਿਗਰੀ ਦੀ ਉਚਾਈ ਨੂੰ ਇੱਕ ਰਿਸ਼ਤੇਦਾਰ ਦੀ ਉਚਾਈ ਤੇ ਪਰਿਭਾਸ਼ਤ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਸਰੀਰ ਅਤੇ ਐਲੀਮੈਂਟ ਐਲੀਮੈਂਟਸ ਦੀ ਉਚਾਈ ਨੂੰ ਸੈੱਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ.

ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਨਾ ਸਿਰਫ ਡੀਵੀ ਦੀ ਉਚਾਈ ਨੂੰ ਸੈੱਟ ਕਰਨ ਲਈ CSS ਨੂੰ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ, ਸਗੋਂ ਸਰੀਰ ਅਤੇ HTML ਦੇ ਤੱਤਾਂ ਵੀ. ਇਹ ਇੱਕ ਚੁਣੌਤੀ ਹੋ ਸਕਦੀ ਹੈ, ਕਿਉਂਕਿ ਤੁਸੀਂ ਛੇਤੀ ਹੀ ਹਰ ਚੀਜ਼ ਨੂੰ 100% ਉਚਾਈ ਤੇ ਪਾ ਲਈ ਸਕਦੇ ਹੋ, ਸਿਰਫ ਇਸ ਲੋੜੀਦੀ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ

ਨੋਟ ਕਰਨ ਵਾਲੀਆਂ ਕੁਝ ਚੀਜ਼ਾਂ ਜਦੋਂ 100% ਹਾਈਟਸ ਨਾਲ ਕੰਮ ਕਰਨਾ ਹੋਵੇ

ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਤੁਹਾਡੇ ਪੰਨਿਆਂ ਦੇ ਤੱਤ ਦੀ ਉਚਾਈ 100% ਤੱਕ ਕਿੰਨੀ ਲਗਾਉਣੀ ਹੈ ਤਾਂ ਬਾਹਰ ਜਾਣ ਅਤੇ ਆਪਣੇ ਸਾਰੇ ਪੰਨਿਆਂ ਲਈ ਇਹ ਕਰਨਾ ਦਿਲਚਸਪ ਹੋ ਸਕਦਾ ਹੈ, ਪਰ ਕੁਝ ਚੀਜ਼ਾਂ ਹਨ ਜਿਨ੍ਹਾਂ ਬਾਰੇ ਤੁਹਾਨੂੰ ਸੁਚੇਤ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ:

ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਤੱਤਾਂ ਦੀ ਉਚਾਈ ਨੂੰ ਵੀ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ. ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ ਆਟੋ ਵਿੱਚ ਸੈਟ ਕਰਦੇ ਹੋ, ਸਕ੍ਰੌਲ ਬਾਰ ਪ੍ਰਗਟ ਹੋਣਗੇ ਜੇ ਉਹਨਾਂ ਦੀ ਲੋੜ ਹੈ ਪਰ ਜਦੋਂ ਉਹ ਨਹੀਂ ਹਨ ਤਾਂ ਅਲੋਪ ਹੋ ਜਾਣਗੇ. ਇਹ ਵਿਜੁਅਲ ਬਰੇਕ ਨੂੰ ਠੀਕ ਕਰਦਾ ਹੈ, ਪਰ ਇਹ ਉਹਨਾਂ ਸਕ੍ਰੌਲਬਾਰਸ ਨੂੰ ਜੋੜਦਾ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਨਹੀਂ ਚਾਹੁੰਦੇ ਹੋ

ਵਿਊਪੋਰਟ ਯੂਨਿਟ ਵਰਤਣਾ

ਇਸ ਚੁਣੌਤੀ ਨਾਲ ਨਜਿੱਠਣ ਦਾ ਇਕ ਹੋਰ ਤਰੀਕਾ ਹੈ CSS ਵਿਊਪੋਰਟ ਇਕਾਈਆਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨੀ. ਮਾਪਣ ਦੇ ਵਿਊਪੋਰਟ ਦੀ ਉੱਚਾਈ ਇਕਾਈ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ ਵਿਊਪੋਰਟ ਦੀ ਇੱਕ ਨਿਸ਼ਚਿਤ ਉਚਾਈ ਲੈਣ ਲਈ ਅਕਾਰ ਦੇ ਤੱਤਾਂ ਨੂੰ ਆਕਾਰ ਦੇ ਸਕਦੇ ਹੋ, ਅਤੇ ਇਹ ਵਿਊਪੋਰਟ ਪਰਿਵਰਤਨਾਂ ਵਿੱਚ ਬਦਲ ਜਾਵੇਗਾ! ਇਹ ਤੁਹਾਡੇ ਪੇਜ ਤੇ 100% ਉੱਚਿਤ ਦਿੱਖ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਵਧੀਆ ਤਰੀਕਾ ਹੈ ਪਰ ਫਿਰ ਵੀ ਉਹਨਾਂ ਨੂੰ ਵੱਖ ਵੱਖ ਡਿਵਾਈਸਾਂ ਅਤੇ ਸਕ੍ਰੀਨ ਦੇ ਸਾਈਜ਼ ਲਈ ਲਚਕਦਾਰ ਬਣਾਉਣਾ ਹੈ.