לפעמים שאנחנו עובדים על אתרים, אחרי שבנינו הידר ופוטר, שנכנס לדפים שאין בהם תוכן הפוטר יופיע למעלה מתחת להידר
במקום שיופיע בתחתית של המסך ושימשיך לרדת למטה במידה ויש תוכן נוסף מעבר ל 100% גובה של הדף.
1. הסתכלות על ההיררכיה
הרי כל דף אינטרנט שיש בו תוכן בנוי מ
- html
- body
- תוכן הדף, בדרך כלל main#content
- footer
2. הטמעה
הקוד הבא שאני משתמש מותאם יותר לאתרי וורדפרס אלמנטור עם תבנית Hello אבל הרעיון יכול לחול על כל אתר, תוכלו להעתיק ולהדביק את הקוד ל style.css לתבנית בת
html{height: 100%;}
body{height: 100%; display: flex; flex-direction: column;}
main#content{flex: 1 0 auto;}
.elementor-location-footer{flex-shrink: 0;}
מה עשינו בעצם?
- שורה 1: מגדירים את הדף כ 100%
- שורה 2: מגדירים את גוף הדף גם כ 100% מהדף, בתור עמודה עם פלקסבוקס
- שורה 3: אומרת לכל תוכן הדף תתפוס את כל המקום הפנוי שיש לך בדף
- שורה 4: אומרת לפוטר אל תתפוס שום מקום פנוי
3. תוצאה
