ವೆಬ್ಸೈಟ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಸಾಮಾನ್ಯವಾಗಿ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಯೆಂದರೆ "ನೀವು 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% ನಷ್ಟು ಎತ್ತರವನ್ನು ಹೊಂದಿದ್ದರೆ ಮತ್ತು 10 ಪಿಕ್ಸೆಲ್ಗಳ ಮೇಲಿನ ಮತ್ತು ಕೆಳಗಿನ ಅಂಚುಗಳು ಪ್ರತಿ ಹೆಚ್ಚುವರಿ 20 ಪಿಕ್ಸೆಲ್ಗಳಿಗೆ ಸ್ಕ್ರಾಲ್ ಬಾರ್ ಇರುತ್ತದೆ. ನೆನಪಿಡಿ, ಸಿಎಸ್ಎಸ್ ಬಾಕ್ಸ್ ಮಾದರಿಯು ಅಂಚು, ಅಂಚು, ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಒಂದು ಅಂಶದ ಗಾತ್ರಕ್ಕೆ ಸೇರಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಯಾವುದೇ ಬಾಕ್ಸ್ ಮಾದರಿಯ 100% ಗಿಂತ ಹೆಚ್ಚಿನವು 100% ಗಿಂತ ಹೆಚ್ಚಾಗಿರುತ್ತದೆ.
- ನಿಮ್ಮ ವಿಷಯವನ್ನು ವಿವರಿಸಲಾದ ಎತ್ತರಕ್ಕಿಂತಲೂ ಹೆಚ್ಚಿಗೆ ತೆಗೆದುಕೊಂಡರೆ, ಅದರ ನಂತರ ಏನೇ ಬರೆಯಬಹುದು. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ನೀವು 80% ಎತ್ತರವಿರುವ ಒಂದು ಕಾಲಮ್ನ ವಿನ್ಯಾಸವನ್ನು ಹೊಂದಿದ್ದರೆ, ಅದರ ಒಳಗಿನ ವಿಷಯವು 100% ಎತ್ತರವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಹೆಚ್ಚುವರಿ 20% ಕಾಲಮ್ನ ಕೆಳಗೆ ಮುಂದುವರಿಯುತ್ತದೆ ಮತ್ತು ದೃಶ್ಯ ವಿನ್ಯಾಸವನ್ನು ಮುರಿಯುತ್ತದೆ ನಿಮ್ಮ ಪುಟದ. ಆ ಕಾಲಮ್ ಕೆಳಗೆ ವಿಷಯ ಇದ್ದರೆ, ಪಠ್ಯವು ಅದರ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಸರಳವಾಗಿ ಬರೆಯುತ್ತದೆ. ಒಂದು ವೆಬ್ ಡಿಸೈನರ್ ಪುಟದ ಎತ್ತರವನ್ನು ಒತ್ತಾಯಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿರುವಾಗ ಮತ್ತು ಅದನ್ನು ಪ್ರಾರಂಭಿಸಲು ಸಂಪೂರ್ಣವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಾರೆ, ಆದರೆ ಆ ಪುಟದಲ್ಲಿನ ವಿಷಯವು ಭವಿಷ್ಯದಲ್ಲಿ ಬದಲಾದಾಗ, ಅವರ ಸಂಪೂರ್ಣ ಎತ್ತರವು ಸಂಪೂರ್ಣವಾಗಿ ಪುಟದ ಹರಿವನ್ನು ಮುರಿಯುತ್ತದೆ. ನೀವು ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವೆಬ್ಸೈಟ್ಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ ಇದು ಅಗಲ ಮತ್ತು ಎತ್ತರವು ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ನ ಗಾತ್ರದೊಂದಿಗೆ ಬದಲಾಗಬೇಕು.
ಇದನ್ನು ಸರಿಪಡಿಸಲು, ನೀವು ಅಂಶದ ಎತ್ತರವನ್ನು ಹೊಂದಿಸಬಹುದು. ನೀವು ಅದನ್ನು ಸ್ವಯಂಗೆ ಹೊಂದಿಸಿದರೆ, ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳು ಅಗತ್ಯವಿದ್ದಲ್ಲಿ ಅವು ಗೋಚರಿಸುತ್ತವೆ ಆದರೆ ಅವುಗಳು ಅಲಭ್ಯವಾದಾಗ ಗೋಚರಿಸುತ್ತವೆ. ಅದು ದೃಷ್ಟಿಗೋಚರ ವಿರಾಮವನ್ನು ಪರಿಹರಿಸುತ್ತದೆ, ಆದರೆ ಅದು ನಿಮಗೆ ಅಗತ್ಯವಿಲ್ಲದಿರುವ ಸ್ಕ್ರಾಲ್ಬಾರ್ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ.
ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಘಟಕಗಳನ್ನು ಬಳಸಿ
ಈ ಸವಾಲನ್ನು ನಿಭಾಯಿಸಲು ಮತ್ತೊಂದು ಮಾರ್ಗವೆಂದರೆ ಸಿಎಸ್ಎಸ್ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಯೂನಿಟ್ಗಳ ಪ್ರಯೋಗ. ಮಾಪನದ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಎತ್ತರ ಘಟಕವನ್ನು ಬಳಸುವುದರ ಮೂಲಕ, ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ನ ವ್ಯಾಖ್ಯಾನಿತ ಎತ್ತರವನ್ನು ನೀವು ತೆಗೆದುಕೊಳ್ಳಲು ಗಾತ್ರದ ಅಂಶಗಳನ್ನು ಮಾಡಬಹುದು, ಮತ್ತು ಇದು ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ! ಒಂದು ಪುಟದಲ್ಲಿ ನಿಮ್ಮ 100% ಎತ್ತರ ದೃಶ್ಯಗಳನ್ನು ಪಡೆಯಲು ಇದು ಉತ್ತಮ ಮಾರ್ಗವಾಗಿದೆ ಆದರೆ ಇನ್ನೂ ವಿಭಿನ್ನ ಸಾಧನಗಳು ಮತ್ತು ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಅವು ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ.