הסיטואציה הכי נפוצה (אצלי לפחות) בה אני זקוק לכך, היא כאשר יש לי תמונת רקע בראש ה DIV שלא חוזרת על עצמה. זה יכול להיות מעבר צבע, או לוגו, או כל דבר אחר שיש לו גובה קבוע והוא ברקע. במצב כזה אנחנו חייבים לקבוע ל DIV שלנו גובה, אחרת לא נראה את תמונת הרקע במידה והוא לא יכיל תוכן גבוה מספיק בשביל לראות התמונה. לשם כך בדיוק המציאו ב CSS את ההגדרה min-height. הבעיה היא שזה לא עובד ב ie6. אך הפתרון כבר ישנו: ie6 במילא מתייחס להגדרת גובה כ”המלצה”, ובעצם הוא מממש min-height באופן טבעי. הדבר היחיד שנשאר לנו לעשות זה להפריד בין כללי ה CSSכך ש ie6 יפעיל את הגדרת הגובה, ודפדפנים אחרים את min-height. אפשר לעשות זאת בכמה דרכים:
1. כלל אחד ל ie6 וכלל אחר לשאר הדפדפנים:
<!–[if IE 6]>
<style>
#ourDiv {height:200px;}
</style>
<![endif]–>
<style>
#ourDiv {min-height:200px}
</style>
2. כלל אחד לכולם, וכלל נוסף רק לדפדפנים שמבינים min-height(לקחתי מכאן):
<style>
#ourDiv {height:200px;min-height:200px}
html>body #ourDiv {height:auto}
</style>
הדרך השנייה מבוססת ע”כ שדפדפנים שמבינים את html>body מבינים גם את min-height, ובאמצעות height:auto אנחנו “דורסים את הדריסה” שעשינו ל min-height בכלל הראשון באמצעות height:200px. בכל מקרה, זה עובד..
עוד דבר חשוב: קראתי באותו מקום שאם רוצים שהגודל ייקבע באחוזים ולא בפיקסלים אנחנו נגלה באג ב ie7 בו הוא לא ייחשב מחדש גובה לאחר שינוי גודל חלון. זאת עקב הגדרת הגובה פעמיים (ie7 מבין את html>body). ניתן לתקן את הבאג הזה ככה:
<style>
#ourDiv {height:100%;min-height:100%}
html>body #ourDiv {height:auto;min-height:100%;}
</style>
שימו לב להגדרת min-height השנייה שמכריחה את ie7 להרחיב שוב את ה DIV לגודל הרצוי.
מקווה שזה עזר, עד הפעם הבאה,
סרג’
תענוג
אני מאוד נהנה לקרוא את הפוסטים בבלוג שלך 🙂
כל הכבוד על היוזמה החדשה עם מערכת בלוגלי. בהצלחה !
לכבוד הוא לי!