100% ಒಂದು ಎಚ್ಟಿಎಮ್ಎಲ್ ಎಲಿಮೆಂಟ್ ಎತ್ತರ ಹೊಂದಿಸಲು ಸಿಎಸ್ಎಸ್ ಬಳಸಿ ಹೇಗೆ

ವೆಬ್ಸೈಟ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಯೆಂದರೆ "ನೀವು 100% ಗೆ ಒಂದು ಅಂಶದ ಎತ್ತರವನ್ನು ಹೇಗೆ ಹೊಂದಿಸುತ್ತೀರಿ"?

ಇದು ಸುಲಭದ ಉತ್ತರದಂತೆ ತೋರುತ್ತದೆ. ನೀವು ಒಂದು ಅಂಶದ ಎತ್ತರವನ್ನು 100% ಗೆ ಹೊಂದಿಸಲು ಕೇವಲ CSS ಅನ್ನು ಬಳಸಿ, ಆದರೆ ಈ ಅಂಶವು ಸಂಪೂರ್ಣ ಬ್ರೌಸರ್ ವಿಂಡೋಗೆ ಹೊಂದಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ವಿಸ್ತರಿಸುವುದಿಲ್ಲ. ಇದು ಏಕೆ ನಡೆಯುತ್ತದೆ ಮತ್ತು ಈ ದೃಶ್ಯ ಶೈಲಿಯನ್ನು ಸಾಧಿಸಲು ನೀವು ಏನು ಮಾಡಬಹುದು ಎಂಬುದನ್ನು ಕಂಡುಹಿಡಿಯೋಣ.

ಪಿಕ್ಸೆಲ್ಗಳು ಮತ್ತು ಶೇಕಡಾವಾರು

CSS ಆಸ್ತಿ ಮತ್ತು ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ಬಳಸುವ ಮೌಲ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ಒಂದು ಅಂಶದ ಎತ್ತರವನ್ನು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಿದಾಗ, ಆ ಅಂಶವು ಬ್ರೌಸರ್ನಲ್ಲಿ ಹೆಚ್ಚು ಲಂಬ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ಎತ್ತರದ ಒಂದು ಪ್ಯಾರಾಗ್ರಾಫ್: 100px; ನಿಮ್ಮ ವಿನ್ಯಾಸದಲ್ಲಿ ಲಂಬ ಜಾಗದ 100 ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.ನಿಮ್ಮ ಬ್ರೌಸರ್ ವಿಂಡೋ ಎಷ್ಟು ದೊಡ್ಡದಾಗಿದೆ ಎಂಬುದರ ವಿಷಯವಲ್ಲ, ಈ ಅಂಶ 100 ಪಿಕ್ಸೆಲ್ಗಳು ಎತ್ತರದಲ್ಲಿದೆ.

ಶೇಕಡಾವಾರು ಪಿಕ್ಸೆಲ್ಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. W3C ನಿರ್ದಿಷ್ಟತೆಯ ಪ್ರಕಾರ, ಕಂಟೇನರ್ ಎತ್ತರಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಶೇಕಡಾವಾರು ಎತ್ತರಗಳನ್ನು ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ. ಹಾಗಾಗಿ ನೀವು ಒಂದು ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಎತ್ತರವನ್ನಾಗಿ ಮಾಡಿದರೆ: 50%; 100 px ಎತ್ತರ ಹೊಂದಿರುವ DIV ಒಳಗೆ, ಪ್ಯಾರಾಗ್ರಾಫ್ ಎತ್ತರ 50 ಪಿಕ್ಸೆಲ್ಗಳಾಗಿರುತ್ತದೆ, ಇದು ಮೂಲ ಅಂಶದ 50% ಆಗಿದೆ.

ಶೇಕಡಾ ಹೈಟ್ಸ್ ವಿಫಲವಾದರೆ

ನೀವು ವೆಬ್ಪುಟವನ್ನು ವಿನ್ಯಾಸ ಮಾಡುತ್ತಿದ್ದರೆ, ಮತ್ತು ನೀವು ಕಿಟಕಿಯ ಪೂರ್ಣ ಎತ್ತರವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಬಯಸುವ ಒಂದು ಕಾಲಮ್ ಅನ್ನು ಹೊಂದಿದ್ದರೆ, ನೈಸರ್ಗಿಕ ಇಳಿಜಾರು ಎತ್ತರವನ್ನು ಸೇರಿಸುವುದು: 100%; ಆ ಅಂಶಕ್ಕೆ. ಎಲ್ಲಾ ನಂತರ, ನೀವು ಅಗಲ ಅಗಲವನ್ನು ಹೊಂದಿಸಿದರೆ: 100%; ಅಂಶವು ಪುಟದ ಸಂಪೂರ್ಣ ಸಮತಲ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಆದ್ದರಿಂದ ಎತ್ತರವು ಒಂದೇ ರೀತಿಯದ್ದಾಗಿರಬೇಕು, ಸರಿ? ದುರದೃಷ್ಟವಶಾತ್, ಇದು ಎಲ್ಲರಲ್ಲ.

ಇದು ಏಕೆ ಸಂಭವಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ಬ್ರೌಸರ್ಗಳು ಎತ್ತರ ಮತ್ತು ಅಗಲವನ್ನು ಹೇಗೆ ಅರ್ಥೈಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ವೆಬ್ ಬ್ರೌಸರ್ಗಳು ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಎಷ್ಟು ವಿಶಾಲವಾಗಿ ತೆರೆದಿವೆ ಎನ್ನುವುದರ ಒಟ್ಟು ಲಭ್ಯವಿರುವ ಅಗಲವನ್ನು ಲೆಕ್ಕಹಾಕುತ್ತದೆ. ನಿಮ್ಮ ದಸ್ತಾವೇಜುಗಳಲ್ಲಿ ಯಾವುದೇ ಅಗಲ ಮೌಲ್ಯಗಳನ್ನು ನೀವು ಹೊಂದಿಸದಿದ್ದರೆ, ವಿಂಡೋವು ಸಂಪೂರ್ಣ ವಿಂಡೋವನ್ನು ಅಗಲ ತುಂಬಲು ವಿಷಯಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹರಿಯುತ್ತದೆ (100% ಅಗಲ ಪೂರ್ವನಿಯೋಜಿತವಾಗಿದೆ).

ಎತ್ತರ ಮೌಲ್ಯವನ್ನು ಅಗಲಕ್ಕಿಂತ ಭಿನ್ನವಾಗಿ ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತದೆ. ವಾಸ್ತವವಾಗಿ, ಬ್ರೌಸರ್ಗಳು ಎತ್ತರವನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡುವುದಿಲ್ಲ, ಅದು ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ಗಿಂತ ಹೊರಗಿರುವವರೆಗೆ (ಆದ್ದರಿಂದ ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳು ಅಗತ್ಯವಿರುತ್ತದೆ) ಅಥವಾ ವೆಬ್ ಡಿಸೈನರ್ ಪುಟದಲ್ಲಿನ ಅಂಶಕ್ಕಾಗಿ ಒಂದು ಸಂಪೂರ್ಣ ಎತ್ತರವನ್ನು ಹೊಂದಿಸಿದರೆ. ಇಲ್ಲದಿದ್ದರೆ, ಬ್ರೌಸರ್ ಕೊನೆಗೊಳ್ಳುವವರೆಗೂ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ನ ಅಗಲದಲ್ಲಿರುವ ವಿಷಯ ಹರಿವನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಎತ್ತರವನ್ನು ನಿಜವಾಗಿ ಲೆಕ್ಕ ಹಾಕಲಾಗುವುದಿಲ್ಲ.

ಎತ್ತರವಿಲ್ಲದೆ ಮೂಲ ಅಂಶಗಳನ್ನು ಹೊಂದಿರುವ ಅಂಶದ ಮೇಲೆ ನೀವು ಶೇಕಡಾವಾರು ಎತ್ತರವನ್ನು ಹೊಂದಿಸಿದಾಗ ಸಮಸ್ಯೆಗಳು ಸಂಭವಿಸುತ್ತವೆ - ಅಂದರೆ, ಪೋಷಕ ಅಂಶಗಳು ಡೀಫಾಲ್ಟ್ ಎತ್ತರವನ್ನು ಹೊಂದಿವೆ: ಸ್ವಯಂ; . ಪರಿಣಾಮಕಾರಿಯಾಗಿ, ವ್ಯಾಖ್ಯಾನಿಸದ ಮೌಲ್ಯದಿಂದ ಎತ್ತರವನ್ನು ಲೆಕ್ಕಹಾಕಲು ನೀವು ಬ್ರೌಸರ್ ಅನ್ನು ಕೇಳುತ್ತಿದ್ದೀರಿ. ಅದು ಶೂನ್ಯ-ಮೌಲ್ಯವನ್ನು ಸಮನಾಗಿರುತ್ತದೆಯಾದ್ದರಿಂದ, ಫಲಿತಾಂಶವು ಬ್ರೌಸರ್ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ.

ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ಒಂದು ಶೇಕಡಾಕ್ಕೆ ನೀವು ಎತ್ತರವನ್ನು ಹೊಂದಿಸಲು ಬಯಸಿದರೆ, ಎತ್ತರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕೆಂದಿರುವ ಪ್ರತಿಯೊಂದು ಮೂಲ ಅಂಶದ ಎತ್ತರವನ್ನು ನೀವು ಹೊಂದಿಸಬೇಕು. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ನೀವು ಈ ರೀತಿ ಪುಟ ಹೊಂದಿದ್ದರೆ:





ಇಲ್ಲಿ ವಿಷಯ



ನೀವು DIV ಮತ್ತು ಪ್ಯಾರಾಗ್ರಾಫ್ 100% ಎತ್ತರವನ್ನು ಹೊಂದಬೇಕೆಂದು ನೀವು ಬಯಸಬಹುದು, ಆದರೆ DIV ವಾಸ್ತವವಾಗಿ ಎರಡು ಪೋಷಕ ಅಂಶಗಳನ್ನು ಹೊಂದಿದೆ:

ಮತ್ತು. ಸಾಪೇಕ್ಷ ಎತ್ತರಕ್ಕೆ DIV ನ ಎತ್ತರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು, ನೀವು ದೇಹದ ಮತ್ತು HTML ಅಂಶಗಳ ಎತ್ತರವನ್ನು ಕೂಡ ಹೊಂದಿಸಬೇಕು.

ಆದ್ದರಿಂದ ನೀವು ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಕೇವಲ DIV ನ ಎತ್ತರವನ್ನು ಹೊಂದಿಸಲು ಬಳಸಬೇಕು, ಆದರೆ ದೇಹ ಮತ್ತು HTML ಅಂಶಗಳು ಕೂಡಾ. ಇದು ಒಂದು ಸವಾಲಾಗಿರಬಹುದು, ಎಲ್ಲವನ್ನೂ 100% ಎತ್ತರಕ್ಕೆ ಹೊಂದಿಸಿರುವುದರಿಂದ ನೀವು ಬಯಸಿದ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸಲು ಮಾತ್ರ ನೀವು ತ್ವರಿತವಾಗಿ ಮುಳುಗಬಹುದು.

100% ಹೈಟ್ಸ್ನೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವಾಗ ಗಮನಿಸಬೇಕಾದ ಕೆಲವು ವಿಷಯಗಳು

ಈಗ ನಿಮ್ಮ ಪುಟ ಅಂಶಗಳ ಎತ್ತರವನ್ನು 100% ಗೆ ಹೇಗೆ ಹೊಂದಿಸುವುದು ಎಂದು ನಿಮಗೆ ತಿಳಿದಿರುವುದು, ನಿಮ್ಮ ಎಲ್ಲಾ ಪುಟಗಳಿಗೆ ಹೋಗಿ ಅದನ್ನು ಮಾಡಲು ಉತ್ತೇಜಕವಾಗಿರಬಹುದು, ಆದರೆ ನಿಮಗೆ ತಿಳಿದಿರಬೇಕಾದ ಕೆಲವು ವಿಷಯಗಳಿವೆ:

ಇದನ್ನು ಸರಿಪಡಿಸಲು, ನೀವು ಅಂಶದ ಎತ್ತರವನ್ನು ಹೊಂದಿಸಬಹುದು. ನೀವು ಅದನ್ನು ಸ್ವಯಂಗೆ ಹೊಂದಿಸಿದರೆ, ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳು ಅಗತ್ಯವಿದ್ದಲ್ಲಿ ಅವು ಗೋಚರಿಸುತ್ತವೆ ಆದರೆ ಅವುಗಳು ಅಲಭ್ಯವಾದಾಗ ಗೋಚರಿಸುತ್ತವೆ. ಅದು ದೃಷ್ಟಿಗೋಚರ ವಿರಾಮವನ್ನು ಪರಿಹರಿಸುತ್ತದೆ, ಆದರೆ ಅದು ನಿಮಗೆ ಅಗತ್ಯವಿಲ್ಲದಿರುವ ಸ್ಕ್ರಾಲ್ಬಾರ್ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ.

ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಘಟಕಗಳನ್ನು ಬಳಸಿ

ಈ ಸವಾಲನ್ನು ನಿಭಾಯಿಸಲು ಮತ್ತೊಂದು ಮಾರ್ಗವೆಂದರೆ ಸಿಎಸ್ಎಸ್ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಯೂನಿಟ್ಗಳ ಪ್ರಯೋಗ. ಮಾಪನದ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಎತ್ತರ ಘಟಕವನ್ನು ಬಳಸುವುದರ ಮೂಲಕ, ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ನ ವ್ಯಾಖ್ಯಾನಿತ ಎತ್ತರವನ್ನು ನೀವು ತೆಗೆದುಕೊಳ್ಳಲು ಗಾತ್ರದ ಅಂಶಗಳನ್ನು ಮಾಡಬಹುದು, ಮತ್ತು ಇದು ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ! ಒಂದು ಪುಟದಲ್ಲಿ ನಿಮ್ಮ 100% ಎತ್ತರ ದೃಶ್ಯಗಳನ್ನು ಪಡೆಯಲು ಇದು ಉತ್ತಮ ಮಾರ್ಗವಾಗಿದೆ ಆದರೆ ಇನ್ನೂ ವಿಭಿನ್ನ ಸಾಧನಗಳು ಮತ್ತು ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಅವು ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ.