שאלה נפוצה בעיצוב האתר היא "איך אתה קובע את הגובה של אלמנט 100%"?
זה אולי נראה כמו תשובה קלה. אתה פשוט להשתמש ב- CSS כדי להגדיר את הגובה של אלמנט ל -100%, אבל זה לא תמיד למתוח את האלמנט הזה כדי להתאים את כל חלון הדפדפן. בואו לגלות מדוע זה קורה ומה אתה יכול לעשות כדי להשיג את הסגנון החזותי הזה.
פיקסלים ואחוזים
כאשר אתה מגדיר את הגובה של אלמנט באמצעות המאפיין CSS וערך המשתמש בפיקסלים, אלמנט זה ייקח שטח אנכי רב בדפדפן.
לדוגמה, פסקה בעלת גובה: 100px; ייקח 100 פיקסלים של שטח אנכי בעיצוב שלך. זה לא משנה כמה גדול חלון הדפדפן שלך, אלמנט זה יהיה 100 פיקסלים בגובה.
אחוז העבודה שונה מאשר בפיקסלים. על פי מפרט W3C, אחוזי הגבהים מחושבים ביחס לגובה המכולה. אז אם אתה שם פסקה עם גובה: 50%; בתוך div עם גובה של 100px, הפסקה תהיה 50 פיקסלים בגובה, המהווה 50% של האלמנט ההורה.
מדוע אחוזי הגולן נכשלים
אם אתה מעצב דף אינטרנט, ויש לך עמוד שאתה רוצה לקחת את מלוא גובה החלון, הנטייה הטבעית היא להוסיף גובה: 100%; לאותו יסוד. אחרי הכל, אם אתה קובע את רוחב רוחב: 100%; אלמנט ייקח את החלל האופקי המלא של הדף, כך גובה צריך לעבוד אותו, נכון? למרבה הצער, זה לא המקרה בכלל.
כדי להבין מדוע זה קורה, עליך להבין כיצד הדפדפנים מפרשים גובה ורוחב. דפדפני אינטרנט לחשב את רוחב זמין הכולל כפונקציה של איך רחב חלון הדפדפן נפתח. אם לא תגדיר ערכי רוחב במסמכים שלך, הדפדפן יזרם באופן אוטומטי את התוכן כדי למלא את כל רוחב החלון (רוחב 100% הוא ברירת המחדל).
ערך גובה מחושב באופן שונה מאשר רוחב. למעשה, הדפדפנים אינם מעריכים את הגובה כלל, אלא אם התוכן ארוך כל כך עד שהוא יוצא אל מחוץ למסך התצוגה (ולכן דורש פסי גלילה) או אם מעצב האינטרנט מגדיר גובה מוחלט עבור אלמנט בדף. אחרת, הדפדפן פשוט מאפשר את זרימת התוכן ברוחב של שדה התצוגה עד שהוא מגיע לסוף. הגובה אינו מחושב כלל.
בעיות מתרחשות כאשר אתה מגדיר גובה באחוזים על אלמנט בעל אלמנטים אביים ללא גבהים - במילים אחרות, לאלמנטים ההורים יש גובה ברירת מחדל: אוטומטי; . למעשה, אתה מבקש מהדפדפן לחשב גובה מערך לא מוגדר. מאז זה יהיה שווה ערך ריק, התוצאה היא שהדפדפן עושה כלום.
אם אתה רוצה להגדיר גובה בדפי האינטרנט שלך לאחוז, עליך להגדיר את הגובה של כל רכיב הורה של אחד שברצונך להגדיר את הגובה. במילים אחרות, אם יש לך דף כזה:
תוכן כאן
סביר להניח שאתה רוצה את div ואת הפיסקה בו יש 100% גובה, אבל זה div למעשה יש שני אלמנטים ההורה:
ו. כדי להגדיר את גובה ה- div לגובה יחסי, עליך להגדיר את גובה הגוף ואת האלמנטים HTML גם כן.
אז היית צריך להשתמש ב- CSS כדי להגדיר את הגובה של לא רק את div, אלא גם את הגוף ואת האלמנטים HTML. זה יכול להיות אתגר, שכן אתה יכול לקבל במהירות המום עם הכל להיות מוגדר 100% גובה, רק כדי להשיג את האפקט הרצוי.
כמה דברים כדי לציין בעת עבודה עם 100% גבהים
עכשיו שאתה יודע איך להגדיר את גובה אלמנטים הדף שלך ל -100%, זה יכול להיות מרגש לצאת ולעשות את זה לכל הדפים שלך, אבל יש כמה דברים שאתה צריך להיות מודע:
- שוליים וריפוד יכולים להוסיף פס גלילה שבו אתה לא רוצה אחד. אחד הדברים המעצבנים ביותר שמצאתי עם עבודה עם אחוזי גבהים (ורוחב) הוא שהריפוד והשוליים באותם רכיבים יכולים להוסיף פסי גלילה לדף, למרות שכל התוכן מוצג ללא צורך בסרגלי גלילה. הסיבה לכך היא כי גובה או רוחב של אלמנט הוא הדבר הראשון מחושב. לאחר מכן השוליים והריפודים מתווספים. אז אם יש לך אלמנט עם גובה של 100% ואת השוליים העליונים והתחתונים של 10 פיקסלים כל אחד, יהיה סרגל גלילה עבור 20 פיקסלים נוספים. זכור, מודל תיבת CSS מוסיף שולי, גבול, ריפוד על הגודל של אלמנט, אז 100% עם כל אלה ערכים אחרים תיבת המודל יהיה למעשה יותר מ -100%.
- אם התוכן שלך לוקח יותר מהגובה המוגדר, הוא יחליף כל פריט אחר. במילים אחרות, אם יש לך עיצוב עם עמוד כי הוא 80% בגובה, ואת התוכן כי הוא בתוך זה ייקח 100% של גובה, כי תוספת 20% ימשיכו מתחת לעמוד ולשבור את העיצוב החזותי של הדף שלך. אם יש תוכן מתחת לעמודה זו, הטקסט פשוט יכתוב על החלק העליון של הדף. לעתים קרובות אני רואה את זה קורה כאשר מעצב אינטרנט מנסה לכפות את הגובה של הדף מקבל את זה עובד בצורה מושלמת עבור ההשקה, אבל כאשר התוכן בדף זה משתנה בעתיד, הגבהים המוחלט שלהם לשבור לחלוטין את הזרימה של הדף. זה נכון כפליים כאשר אתה בונה אתרי אינטרנט תגובה שאת רוחב וגובה חייב להשתנות עם גודל של viewport.
כדי לתקן זאת, באפשרותך להגדיר את גובה האלמנט גם כן. אם תגדיר את זה אוטומטית, גלילה פסי יופיעו אם הם נחוצים אבל נעלמים כאשר הם לא. זה מתקן את חזותית הפסקה, אבל זה מוסיף scrollbars איפה אתה לא יכול לרצות אותם.
שימוש ביחידות Viewport
דרך נוספת אתה יכול להתמודד עם האתגר הזה היא להתנסות עם CSS Viewport יחידות. באמצעות יחידת גובה התצוגה של המדידה, אתה יכול לגודל אלמנטים כדי לגובה גובה מוגדרת של viewport, וזה ישתנה כמו השינויים ויפורט! זוהי דרך מצוינת לקבל את 100% גובה חזותיים בדף אבל עדיין יש להם להיות גמישים עבור מכשירים שונים וגדלים מסך.