סטיקי פוטר – הגרסה הקלאסית

בטח אתם נתקלתם בבעיה כשאין הרבה תוכן בעמוד ופתאום הפוטר של האתר שלכם תקוע באמצע הדף… אז איך מצמידים אותו לתחתית העמוד? יש הרבה שיטות להצמיד פוטר. ככל הנראה אשתף אתכם בכמה שיטות אך נתחיל עם השיטה הקלאסית . בלי כלים מתקדמים של CSS3 כמו גריד (grid) או פלקס (flex) .

יש גם שיטות קלאסיות עם שימוש ב position: absolute או position: fixed .

אבל נתחיל בשיטת אחת פשוטה ונחמדה.

רק תזכורת לחברה המתחילים שעוד לא בטוחים מה זה פוטר (footer ) או האדר (header). 

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

עכשיו נמשיך בטיפ שלי 🙂 .

יש לעטוף בדיב את כל רכיבי הHTML שלכם בנפרד לפטור על מנת שיהיה אפשר לדחוף אותו כלפי מטה ולתת לדיב שמכיל את כל האלמנטים 100% גובה, פחות הגובה של הפוטר. אפשר לשחק בהתאם למבנה הדיבים שלכם ולהגדיר לדיבים את המאפיינים של הגבהים בהתאמה

להלן דוגמה של קבציה ה HTML וCSS

<div class="body">
<div class="header">
  <span>זה ההאדר</span>
</div>

<div class="content">
<h1>  זה הבודי</h1>
</div>
</div>

<div class="footer">
זה הפוטר
</div>

* {
    box-sizing: border-box;
  }

html, body {
    height: 100%;
    margin: 0;
direction: rtl;
font-family: Arial, Helvetica, sans-serif;
}

  .header
{
    color: #fff;
    padding: 20px;
    background-color: darkcyan;
}


.body
{
    background-color: #fff;
    margin-bottom: -50px;
    min-height: 100%;
}
.content
{
    padding: 20px;
}


.footer
{
    color: #fff;
    height: 50px;
    padding: 20px;
    background-color: darkgoldenrod;
}

פשוט וקל.

שיטות נוספות לסטיקי פוטר.

נושא נוסף : סטיקי האדר

פוסטים קשורים:

רכיבים נגישים: כפתורי רדיו ותיבות סימון מעוצבים שימוש ב-currentColor CSS מדריך CSS + HTML – הבסיס – חלק 3 מדריך אנגולר | סיכום מיני קורס אנגולר reactive forms