כיצד להגדיר את גובה אלמנט HTML ל 100%

כמה דברים כדי לציין בעת ​​עבודה עם 100% גבהים

עכשיו שאתה יודע איך להגדיר את גובה אלמנטים הדף שלך ל -100%, זה יכול להיות מרגש לצאת ולעשות את זה לכל הדפים שלך, אבל יש כמה דברים שאתה צריך להיות מודע:

• שוליים וריפוד יכולים להוסיף פס גלילה שבו אתה לא רוצה אחד.אחד הדברים הכי מעצבן שמצאתי עם עבודה עם אחוזי גבהים (ורוחב) הוא כי הריפוד ואת השוליים על אותם אלמנטים יכולים להוסיף סרגלי גלילה לדף, למרות כל התוכן מציג ללא צורך scrollbars. הסיבה לכך היא כי גובה או רוחב של אלמנט הוא הדבר הראשון מחושב. לאחר מכן השוליים והריפודים מתווספים. אז אם יש לך אלמנט עם גובה של 100% ואת השוליים העליונים והתחתונים של 10 פיקסלים כל אחד, יהיה סרגל גלילה עבור 20 פיקסלים נוספים. זכור, מודל תיבת CSS מוסיף שולי, גבול, ריפוד על הגודל של אלמנט, אז 100% עם כל אלה ערכים אחרים תיבת המודל יהיה למעשה יותר מ -100%.
• אם התוכן שלך לוקח יותר מהגובה המוגדר, הוא יחליף כל פריט אחר.במילים אחרות, אם יש לך עיצוב עם עמוד כי הוא 80% בגובה, ואת התוכן כי הוא בתוך זה ייקח 100% של גובה, כי תוספת 20% ימשיכו מתחת לעמוד ולשבור את העיצוב החזותי של הדף שלך. אם יש תוכן מתחת לעמודה זו, הטקסט פשוט יכתוב על החלק העליון של הדף. לעתים קרובות אני רואה את זה קורה כאשר מעצב אינטרנט מנסה לכפות את הגובה של הדף מקבל את זה עובד בצורה מושלמת עבור ההשקה, אבל כאשר התוכן בדף זה משתנה בעתיד, הגבהים המוחלט שלהם לשבור לחלוטין את הזרימה של הדף. זה נכון כפליים כאשר אתה בונה אתרי אינטרנט תגובה שאת רוחב וגובה חייב להשתנות עם גודל של viewport.

כדי לתקן זאת, באפשרותך להגדיר את גובה האלמנט גם כן. אם תגדיר את זה

אוטומטי,

גלילה יופיעו אם הם נחוצים אבל נעלמים כאשר הם לא.זה מתקן את חזותית הפסקה, אבל זה מוסיף scrollbars איפה אתה לא יכול לרצות אותם.