היי, אני מנסה לעשות פוטר שידבק למטה לא משנה מה גודל הדף
עשיתי את זה כבר כמה פעמים והשתמשתי במדריך הזה https://css-tricks.com/snippets/css/sticky-footer/
הבעיה שהפעם אני משתמש בספריית צד לקוח (EMBER) שעוטפת את כל התוכן שלי כולל את ה footer ב div ואז זה לא נהיה כמו בקוד שהם הביאו במדריך שיש wrapper עם min-height של 100%
ניסיתי לתת לdiv הזה גובה גם של 100% אבל זה לא עזר
רעיונות?

חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

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

יכולות להיות כל מיני פתרונות "לעקוף" את הפעולה של הספרייה הזאת. השאלה עד כמה זה הכרחי ואיך בדיוק היא עובדת.
(דוגמא לפיתרון כזה - ליצור סקריפט משלך שימקם את הfooter איפה שאתה רוצה מבחינת הDOM, אחרי שהספרייה נטענה)

היי מתי תודה על התגובה

העליתי את העמוד כפי שהוא מיוצג ע"י האפליקציה כאן: http://drawyourgif.pe.hu/dist/
כפי שאתה יכול לראות זה מופיע באמצע העמוד (הרקע הכחול כהה) מאחורי הריבועים האפורים

אני מעדיף לא להעביר את ה footer מחוץ ל container של האפליקציה כי נראה לי שזה יגרום להתנהגות לא צפויה מבחינת האפליקציה

חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

בגלל שה footer שלך ממוקם בתוך ה ember-view שעוטף את כל האתר, המדריך שהבאת בהודעה הראשונה לא רלוונטי, וכך גם שינוי של הCSS עבור wrapper כמו שהוא ממוקם כרגע.

פתרון אחד, יהיה לשנות את המבנה, כך שכל האתר יכנס לתוך המעטפת של wrapper ואת ה footer תשאיר בחוץ. (וכל זה יהיה בתוך ember-view שיוגדר להיות 100% מהגובה של הדף).
ואז אתה מנטרל, כביכול, את ההשפעה של ember-view שיהפוך להיות מבחינתך כמו body.


אם אתה לא רוצה/יכול לשנות את המבנה של האתר,
אז פתרון נוסף, יהיה לשנות את הCSS של המבנה הקיים, לפי שיטה אחרת ולא לפי המדריך שהשתמשת בו.
לדוגמא, למקם את ה footer בעזרת position:absolute .

בשלב הראשון, תצטרך להוסיף ל ember-view את המאפיינים הבאים:

קוד:

.ember-view {
	min-height: 100%;
	position: relative;
}

שלב שני, תמחק את כל ההגדרות שקיימות כרגע על wrapper וגם wrapper::after .

שלב שלישי, תוסיף ל mainFooter את המאפיינים הבאים:

קוד:

.mainFooter {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

עכשיו אתה כבר תראה שה footer דבוק לתחתית כמו שרצית.
אבל אם תוסיף תוכן לעמוד (או אם הגודל של החלון יהיה קטן יותר), ה footer יעלה על התוכן של האתר.
לכן, צריך להוסיף ריווח בגודל של ה footer, כדי לשמור לו מקום קבוע בדף, ואת זה אפשר לעשות על ידי אלמנט נוסף שתוסיף לפני ה footer, או להשתמש ב wrapper::after שהיה קיים אצלך.

אז תוסיף מחדש, עם המאפיינים הבאים:

קוד:

.wrapper::after {
	content: "";
	display: block;
	padding-bottom: 100px; /* footer height */
	clear: both;
}

הוספתי את ה clear מכיוון שאתה משתמש שם ב float לבלוקים, ואין להם "נפח" בכלל. ולכן, בלי זה ה footer ימשיך לעלות על התוכן של האתר.

דבר ראשון תודה רבה עובד

דבר שני, ה ember-view זה class שמופיע בעוד כמה אלמנטים באתר ואני צריך שרק הדיב הראשי שמתחת ל body יהיה עם ההגדרות האלה אז עשיתי:

קוד:

body > .ember-view {
    min-height: 100%;
    position: relative;
}

זה יתפוס רק את הדיב שהוא הבן של הבודי נכון ולא את כל השאר?
רק רציתי לדעת אם עשיתי טוב

חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו

אכן, עשית טוב

תודה רבה מתי

חתימתי העצומה בגודלה הוסרה ע"י השליט הבלתי מעורער שימי, למי שיש בעיה שיפנה אליו.


ד אַל תַּעַן כְּסִיל כְּאִוַּלְתּוֹ פֶּן תִּשְׁוֶה לּוֹ גַם אָתָּה. ה עֲנֵה כְסִיל כְּאִוַּלְתּוֹ פֶּן יִהְיֶה חָכָם בְּעֵינָיו