כיצד לגרום לכותרת התחתונה לחלק מהעמוד ("כותרת תחתונה") להיצמד לגבול התחתון של החלון - זו כנראה הבעיה הנפוצה ביותר בפריסת דפי האתר. יש, כמובן, פתרונות, ויש כמה כאלה. להלן דרך אחת לוודא שכותרת התחתונה לחוצה תמיד לתחתית הדף, ללא קשר לכמות התוכן ולסוג הדפדפן.
זה הכרחי
ידע בסיסי ב- CSS ו- HTML
הוראות
שלב 1
בואו ניקח את אחת מתכניות העיצוב האופייניות יותר כדוגמה - תהיה לה עליית גג (כותרת עליונה), גוש ראשי וכותרת תחתונה. כמובן שבמידת הצורך ניתן להכניס כמה עמודות לבלוק הראשי, אך לא נעשה זאת כאן, אנו נתמקד רק באי מיקום הכותרת התחתונה. קוד ה- HTML של הדף יתחיל בהצהרת המפרט:
בין התגיות, בנוסף לכותרת העמוד, אנו נציג אינדיקציה לקידוד: כמו גם קישור לקובץ CSS חיצוני המכיל תיאור סגנונות: @import "styles.css"; לא נציב את תיאור סגנונות ישירות לתוך קוד ה- HTML של הדף כדי למנוע סיבוכים עם דפדפן האופרה של הגרסה התשיעית. בין התגים למקם את מבנה החסימה של הדף. הראשון, כמובן, הוא חסימת הכותרת. אנו נותנים לו את מזהה הכותרת כדי להיות מסוגל להגדיר סגנונות לחסימה מסוימת זו:
הכותרת הזו נמצאת תמיד בראש החלון.
ואז - החסימה הראשית של הדף. זה יורכב משני מקוננים - חיצוני (מזהה - חיצוני) ופנימי (מזהה - מעטפת חיצונית):
זה החלק העיקרי.
ולבסוף, הכותרת התחתונה:
זה כותרת תחתונה - תמיד בתחתית החלון!
הדף השלם ייראה כך:
כיצד ללחוץ על הכותרת התחתונה
@import "styles.css";
כותרת זו נמצאת תמיד בראש החלון.
זה החלק העיקרי.
זה כותרת תחתונה - תמיד בתחתית החלון!
שלב 2
עכשיו בואו נעבור לתוכן גיליון הסגנונות. היא מיישמת את התוכנית הבאה: גוש הדף הראשי יוגדר ל- 100% גובה, הכותרת תוצב באופן מוחלט וכותרת התחתונה תהיה יחסית. כדי למנוע מהכותרת לחפוף את התוכן הראשי של הדף, תוכן ראשי זה ממוקם בתיבה נוספת בתוך התיבה הראשית, ותיבה נוספת זו מוגדרת לשוליים עליונים השווים לגובה תיבת הכותרת. ולכותרת התחתונה ניתן שוליים עליונים שליליים השווים לגובהו - באופן זה הוא מורם מעל הקצה התחתון של החלון לגובהו המלא. תוכן מלא של קובץ ה- css: * {margin: 0; ריפוד: 0}
html, גוף {גובה: 100%;} גוף {
צבע שחור;
מיקום: קרוב משפחה;
}
# outer {
גובה דקות: 100%;
שוליים: 0;
רקע: לבן;
צבע שחור;
} * html #outer {גובה: 100%;}
#header {
עמדה: מוחלט;
למעלה: 0;
משמאל: 0;
רוחב: 100%;
גובה: 70 פיקסלים;
רקע: # 304a00;
הצפה: מוסתרת;
צבע לבן;
יישור טקסט: מרכז;
} #footer {
מיקום: קרוב משפחה;
שוליים למעלה: -50 פיקסלים;
תנקה את שניהם;
רוחב: 100%;
גובה: 50 פיקסלים;
צבע רקע: # 304a00;
צבע לבן;
יישור טקסט: מרכז;
}
.outerwrap {
לצוף: שמאלה;
רוחב: 100%;
ריפוד עליון: 71 פיקסלים;
} יש לשמור את הקובץ הזה עם השם שציינו בקוד ה- HTML של הדף - styles.css.
