Πώς να κάνετε το υποσέλιδο μέρος της σελίδας ("υποσέλιδο") να κολλήσει στο κάτω περίγραμμα του παραθύρου - αυτό είναι ίσως το πιο κοινό πρόβλημα στη διάταξη των σελίδων του ιστότοπου. Υπάρχουν, φυσικά, λύσεις και υπάρχουν πολλές από αυτές. Παρακάτω είναι ένας τρόπος για να βεβαιωθείτε ότι το υποσέλιδο είναι πάντα πατημένο στο κάτω μέρος της σελίδας, ανεξάρτητα από το μέγεθος του περιεχομένου και τον τύπο του προγράμματος περιήγησης.
Είναι απαραίτητο
Βασικές γνώσεις CSS και HTML
Οδηγίες
Βήμα 1
Ας πάρουμε ένα από τα πιο τυπικά σχήματα σελιδοποίησης ως παράδειγμα - θα έχει σοφίτα (κεφαλίδα), κύριο μπλοκ και υποσέλιδο. Φυσικά, εάν είναι απαραίτητο, μπορείτε να βάλετε πολλές στήλες στο κύριο μπλοκ, αλλά δεν θα το κάνουμε εδώ, θα επικεντρωθούμε μόνο στη μη τοποθέτηση του υποσέλιδου. Ο κώδικας HTML της σελίδας θα ξεκινήσει με τη δήλωση της προδιαγραφής:
Μεταξύ των ετικετών και, εκτός από τον τίτλο της σελίδας, θα τοποθετήσουμε μια ένδειξη της κωδικοποίησης: καθώς και έναν σύνδεσμο προς ένα εξωτερικό αρχείο CSS που περιέχει περιγραφή των στυλ: @import "styles.css"; Δεν θα τοποθετήσουμε το περιγραφή των στυλ απευθείας στον κώδικα html της σελίδας για την αποφυγή επιπλοκών με το πρόγραμμα περιήγησης Opera της ένατης έκδοσης. Μεταξύ των ετικετών και τοποθετήστε τη δομή μπλοκ της σελίδας. Το πρώτο, φυσικά, είναι το μπλοκ τίτλου. Θα του δώσουμε το αναγνωριστικό κεφαλίδας για να μπορεί να ορίζει στυλ για αυτό το συγκεκριμένο μπλοκ:
Αυτή η κεφαλίδα βρίσκεται πάντα στην κορυφή του παραθύρου.
Στη συνέχεια - το κύριο μπλοκ της σελίδας. Θα αποτελείται από δύο ένθετα - εξωτερικό (αναγνωριστικό - εξωτερικό) και εσωτερικό (αναγνωριστικό - εξωτερικό περιτύλιγμα):
Αυτό είναι το κύριο μέρος.
Και τέλος, το υποσέλιδο:
Είναι υποσέλιδο - πάντα στο κάτω μέρος του παραθύρου!
Η πλήρης σελίδα θα έχει την εξής μορφή:
Πώς να πατήσετε το υποσέλιδο
@import "Styles.css";
Αυτή η κεφαλίδα βρίσκεται πάντα στην κορυφή του παραθύρου.
Αυτό είναι το κύριο μέρος.
Είναι υποσέλιδο - πάντα στο κάτω μέρος του παραθύρου!
Βήμα 2
Τώρα ας προχωρήσουμε στα περιεχόμενα του φύλλου στυλ. Εφαρμόζει το ακόλουθο σχήμα: το μπλοκ της κύριας σελίδας θα ρυθμιστεί σε ύψος 100%, ο τίτλος θα είναι απολύτως τοποθετημένος και το υποσέλιδο θα είναι σχετικά. Για να αποφευχθεί η επικάλυψη της επικεφαλίδας του κύριου περιεχομένου της σελίδας, αυτό το κύριο περιεχόμενο τοποθετείται σε ένα πρόσθετο πλαίσιο μέσα στο κύριο πλαίσιο και αυτό το πρόσθετο πλαίσιο έχει ρυθμιστεί σε ένα ανώτερο περιθώριο ίσο με το ύψος του πλαισίου επικεφαλίδας. Και στο υποσέλιδο δίνεται αρνητικό άνω περιθώριο ίσο με το ύψος του - με αυτόν τον τρόπο θα ανυψωθεί πάνω από το κάτω άκρο του παραθύρου στο πλήρες ύψος του. Πλήρες περιεχόμενο του αρχείου css: * {margin: 0; επένδυση: 0}
html, body {ύψος: 100%;} body {
χρωμα μαυρο;
θέση: σχετική
}
# δρομολογητής {
ελάχιστο ύψος: 100%;
περιθώριο: 0;
φόντο: λευκό;
χρωμα μαυρο;
} * html #outer {ύψος: 100%;}
# επικεφαλής {
θέση: απόλυτη;
κορυφή: 0;
αριστερά: 0;
πλάτος: 100%;
ύψος: 70px;
φόντο: # 304a00;
υπερχείλιση: κρυφό;
άσπρο χρώμα;
text-align: center;
} # ποδόσφαιρο {
θέση: σχετική
margin-top: -50 εικονοστοιχεία;
σαφές: και τα δύο?
πλάτος: 100%;
ύψος: 50px;
χρώμα φόντου: # 304a00;
άσπρο χρώμα;
text-align: center;
}
.outerwrap {
float: αριστερά;
πλάτος: 100%;
επένδυση: 71px;
} Αυτό το αρχείο πρέπει να αποθηκευτεί με το όνομα που καθορίσαμε στον κώδικα html της σελίδας - Sty.css.
