Διαφήμιση στην πύλη

Πιέζουμε το υπόγειο προς τα κάτω. Διορθώθηκε το υποσέλιδο Δημιουργία υποσέλιδου

Πατήστε το υποσέλιδο στο κάτω μέρος της οθόνης. Απαιτήσεις:

  • το υποσέλιδο πιέζεται στο κάτω μέρος της οθόνης όταν το ύψος του παραθύρου του προγράμματος περιήγησης είναι μεγαλύτερο από το ύψος της σελίδας, ανεξάρτητα από το περιεχόμενο
  • το υποσέλιδο βρίσκεται στη σωστή του θέση όταν ο όγκος του περιεχομένου είναι μεγαλύτερος από το ύψος του παραθύρου του προγράμματος περιήγησης
  • λειτουργεί σε όλα τα δημοφιλή προγράμματα περιήγησης
  • αξιοπιστία - δεν εξαρτάται από την πολυπλοκότητα της διάταξης

Θεωρία

Είναι καλή πρακτική να γεμίζετε ολόκληρη τη διαθέσιμη περιοχή της οθόνης του προγράμματος περιήγησης με τον ιστότοπο (τουλάχιστον σε ύψος για σχέδια που είναι στατικά σε πλάτος).

Λύση

Για παράδειγμα, ας πάρουμε μια απλή σελίδα που αποτελείται από δύο κύρια μπλοκ: κύριο και υποσέλιδο. Ας βεβαιωθούμε ότι το κύριο μπλοκ καταλαμβάνει ολόκληρη την περιοχή του παραθύρου του προγράμματος περιήγησης, ανεξάρτητα από την ποσότητα του περιεχομένου, ενώ πατάμε το υποσέλιδο στο κάτω μέρος της οθόνης, ώστε να μην εμφανίζεται μια κάθετη γραμμή κύλισης στο πρόγραμμα περιήγησης. Πώς το κάνουμε:

Βήμα 1

Φτιάχνουμε 2 μπλοκ: κύριο (κύριο) και υπόγειο (υποδοχή). Τεντώνουμε το κύριο κοντέινερ σε όλο το ύψος της οθόνης του προγράμματος περιήγησης () και καθορίζουμε αυστηρά το ύψος του υποσέλιδου ().

Σε αυτήν την περίπτωση, το συνολικό ύψος του ιστότοπου θα είναι το ύψος της οθόνης + το ύψος του υποσέλιδου.

Βήμα 2

Το σημείωμα: Όταν χρησιμοποιείτε διάταξη μπλοκ και αιωρούμενα κύρια μπλοκ (στήλες) για .hFooter, θα πρέπει να προσθέσετε : και τα δύο έτσι ώστε το υποσέλιδο να βρίσκεται κάτω από τις στήλες.:

HFooter (καθαρό: και τα δύο; ύψος: 40 εικονοστοιχεία; )

Δοκιμασμένο σε:

Σημείωση 1:Εάν έχετε ήδη κατακτήσει λίγο το CSS, τότε μπορεί να προκύψει το ερώτημα: "Γιατί να χρησιμοποιήσετε ένα πρόσθετο στοιχείο εάν μπορείτε να το χρησιμοποιήσετε;". Η απάντηση είναι ότι δεν μπορείτε να το χρησιμοποιήσετε μόνο εδώ, γιατί... Το μέγεθος ενός μπλοκ είναι ίσο με το πλάτος και το ύψος του + το άθροισμα των εσωτερικών γεμισμάτων + το άθροισμα των πάχους περιγράμματος. Σύνδεσμος: 100% και θα δώσει το ύψος του ιστότοπου μεγαλύτερο από το ύψος της οθόνης. Ως αποτέλεσμα, ακόμη και αν δεν υπάρχει καθόλου περιεχόμενο, το υποσέλιδο θα βρίσκεται εκτός της «πρώτης οθόνης». Δείτε παρακάτω πώς να το ξεπεράσετε αυτό.

Σημείωση 2.Στην έκδοση Opera 9.5 και νεότερη, αυτό το παράδειγμα δεν θα λειτουργήσει κατά την προσθήκη ενός doctype. Επιλογές λύσης:

  • προσθέστε τουλάχιστον ένα αιωρούμενο μπλοκ στην κύρια ετικέτα κοντέινερ:

    Αυτό είναι το κύριο μπλοκ
    Αυτό είναι το υπόγειο

  • προσθέστε δύο ιδιότητες για html, body:

    Html, body ( ύψος: 100%; float: αριστερά; πλάτος: 100%; )

  • τοποθετήστε τα στυλ σε ένα ξεχωριστό αρχείο CSS:

ενημέρωση 8.12.09 - Μειονέκτημα αυτής της τεχνικής

Αυτή είναι η χρήση ενός επιπλέον κενού στοιχείου hFooter. Σε πραγματικές συνθήκες (όταν το περιεχόμενο του ιστότοπου δεν είναι κενό και χρησιμοποιείται διάταξη μπλοκ), αυτό μπορεί να αποφευχθεί με τη χρήση - αυτό το παράδειγμα θα βοηθήσει στην εκκαθάριση της ροής χωρίς τη χρήση πρόσθετου στοιχείου και έτσι ώστε το περιεχόμενο να μην ταιριάζει στο υποσέλιδο, θα το γράψουμε στις στήλες

ενημέρωση 28/12/09 - προβλήματα με τα επίπεδα z

Στην τεχνική που περιγράφεται παραπάνω, το υποσέλιδο ανυψώθηκε με αρνητική εσοχή προς τα πάνω. Αυτό εγείρει ένα πιθανό πρόβλημα με τα z-layers. Για παράδειγμα, πρέπει να εμφανίσουμε ένα αναδυόμενο παράθυρο (ας είναι div class="popup"), το οποίο θα τοποθετηθεί σε σχέση με το κύριο κοντέινερ.

[...]
[...]
[...]

Main ( θέση: σχετική; /* έτσι ώστε τα θυγατρικά στοιχεία να τοποθετούνται σε σχέση με αυτό το μπλοκ */ z-index: 1; /* z-index λιγότερο από το υποσέλιδο ώστε να είναι ορατό */ ) .popup ( θέση: απόλυτη; z-index : 100; [...] ) .footer (ύψος: 50 px; margin-top: -50 px; θέση: σχετική; /* ώστε να μπορείτε να ορίσετε το z-index */ z-index: 2; / * μεγαλύτερο από αυτό το κύριο για να είναι ορατό */ )

Όλα είναι καλά μέχρι να διασταυρωθούν το αναδυόμενο παράθυρο και το υπόγειο (και αυτή η κατάσταση εμφανίζεται αρκετά συχνά) - εδώ αρχίζουν τα προβλήματα. Παρά το γεγονός ότι το αναδυόμενο παράθυρο έχει τον υψηλότερο δείκτη z, θα επικαλύπτεται από το υποσέλιδο, επειδή το γονικό αναδυόμενο παράθυρο έχει δείκτη z χαμηλότερο από το υποσέλιδο:

Επιλογή 1 - αναζητήστε μια ευκαιρία να τοποθετήσετε το παράθυρο όχι σε σχέση με το κύριο, αλλά σε σχέση με κάποιο άλλο θυγατρικό στοιχείο που βρίσκεται στο κύριο. Έτσι, θα απαλλαγούμε από τον καθορισμό του δείκτη z για κύριο και υποσέλιδο. Αλλά αυτή η επιλογή δεν είναι πάντα δυνατή, οπότε ας εξετάσουμε τη δεύτερη επιλογή του πατήματος του υποσέλιδου.

Λύση 2 - Απόλυτη Τοποθέτηση

Η ιδέα είναι παρόμοια με τη λύση 1:

  1. τεντώστε το κύριο μπλοκ σε όλο το ύψος της οθόνης
  2. κρατήστε χώρο για το υπόγειο
  3. σε σχέση με το κύριο μπλοκ, τοποθετήστε το υπόγειο στο κάτω μέρος χρησιμοποιώντας απόλυτη τοποθέτηση

[...]
[...]

Html, body ( ύψος: 100%; ) .main ( ελάχ.-ύψος: 100%; θέση: σχετική; /* έτσι ώστε τα θυγατρικά στοιχεία να τοποθετούνται σε σχέση με αυτό το μπλοκ */ ) .footer (ύψος: 50 px; θέση: απόλυτη; αριστερά: 0 ; κάτω: 0; πλάτος: 100%; ) * html .footer ( bottomy:expression(parentNode.offsetHeight % 2 ? style.bottom="-1px" : style.bottom="0px"); /* hack για το e6, το οποίο έχει ένα jamb με μετατόπιση 1 px */ )

Αυτή η προσέγγιση θα λύσει το πρόβλημα με τα αναδυόμενα παράθυρα, επειδή... τόσο το υποσέλιδο όσο και το αναδυόμενο παράθυρο θα έχουν έναν κοινό γονέα, πράγμα που σημαίνει ότι δεν θα υπάρχουν εκπλήξεις με τα z-layers.

Πριν από λίγο καιρό μου ζήτησαν να δείξω πώς να πατήσετε το υποσέλιδο προς τα κάτω. Ένα παρόμοιο πρόβλημα προκύπτει μόνο με τη διάταξη μπλοκ. Και, δυστυχώς, δεν υπάρχει βέλτιστη επιλογή, αλλά σε αυτό το άρθρο θα δείξω πώς πατάω το υποσέλιδο προς τα κάτωΣχεδιάζω ιστοσελίδες.

Ας πούμε ότι υπάρχει ένα Κώδικας HTML:





Προς την πατήστε το υποσέλιδο προς τα κάτω, πρέπει να εφαρμοστεί σε αυτό Κώδικας HTMLΕπόμενο Κωδικός CSS:

HTML (
ύψος: 100%;
}
σώμα(
ύψος: αυτόματο !σημαντικό; //Απαιτείται εάν υπάρχει πολύ περιεχόμενο στο main
ύψος: 100%;
Ελάχιστο ύψος: 100%;
}
#κύριος (
padding-bottom: 50px;
}
#footer (
κάτω: 0;
ύψος: 50 px;
θέση: απόλυτη;
}

Όλα είναι διαφανή εδώ, αλλά θα πω μόνο ότι η γραμμή " ύψος: αυτόματο !σημαντικό;" σας επιτρέπει να λάβετε υπόψη ότι εάν το περιεχόμενο κύριοςθα είναι μεγαλύτερο από το ύψος της σελίδας, τότε το ύψος θα είναι μεγαλύτερο από 100% . Χωρίς αυτό, το υποσέλιδο θα ταιριάζει απλώς στο περιεχόμενο και θα βρίσκεται πάντα στην ίδια θέση.

Δυστυχώς, η λύση δεν είναι πολύ όμορφη, αλλά άλλες, κατά τη γνώμη μου, είναι ακόμη χειρότερες. Γενικά, όταν υπάρχει λίγο περιεχόμενο, απλά αφήνω το χρώμα φόντου του ιστότοπου στο κάτω μέρος. Αλλά μερικές φορές ο πελάτης εξακολουθεί να ρωτά σπρώξτε το υπόγειο προς τα κάτω, και στη συνέχεια χρησιμοποιώ τη μέθοδο που περιγράφεται σε αυτό το άρθρο.

Κάθε σχεδιαστής διάταξης αργά ή γρήγορα αντιμετωπίζει την ανάγκη να πατήσει το υποσέλιδο ενός ιστότοπου στο κάτω μέρος της σελίδας. Υπάρχουν διάφοροι τρόποι στο Διαδίκτυο για να λύσετε αυτό το πρόβλημα. Θα σας δείξω μερικά από αυτά που ο ίδιος χρησιμοποιώ στην πράξη.

Η απλούστερη σήμανση html:

Μέθοδος #1

Το υποσέλιδο ωθείται προς τα κάτω τοποθετώντας το απόλυτα και τεντώνοντας το ύψος των γονικών μπλοκ (html , σώμα και περιτύλιγμα) στο 100%. Σε αυτήν την περίπτωση, το μπλοκ περιεχομένου πρέπει να καθορίσει ένα κάτω περιθώριο ίσο ή μεγαλύτερο από το ύψος του υποσέλιδου, διαφορετικά το τελευταίο θα καλύπτει μέρος του περιεχομένου.

* ( περιθώριο: 0; padding: 0; ) html, σώμα ( ύψος: 100%; ) .wrapper ( θέση: σχετική; ελάχ. ύψος: 100%; ) .content ( padding-bottom: 90px; ) .footer ( position : απόλυτη, αριστερά: 0, κάτω: 0, πλάτος: 100%, ύψος: 80 εικονοστοιχεία, )

Μέθοδος #2

Το υποσέλιδο πιέζεται προς τα κάτω τραβώντας το μπλοκ περιεχομένου και τους «γονείς» του σε όλο το ύψος του παραθύρου του προγράμματος περιήγησης και σηκώνοντας το υποσέλιδο προς τα πάνω μέσω ενός αρνητικού περιθωρίου (περιθώριο-κορυφή) για να απαλλαγείτε από την κατακόρυφη κύλιση που εμφανίζεται. Σε αυτή την περίπτωση, είναι απαραίτητο να υποδείξετε το ύψος του υπογείου και πρέπει να είναι ίσο με το μέγεθος της εσοχής. Χάρη στην ιδιότητα box-sizing: border-box, εμποδίζουμε το πλαίσιο με την κατηγορία περιεχομένου να υπερβεί το 100% ύψος. Δηλαδή, σε αυτήν την περίπτωση ελάχιστο ύψος: 100% + padding-bottom: 90 εικονοστοιχεία ισούται με το 100% του ύψους του παραθύρου του προγράμματος περιήγησης.

* ( περιθώριο: 0; padding: 0; ) html, body, .wrapper (ύψος: 100%; ) .content (μέγεθος κουτιού: πλαίσιο-πλαίσιο; ελάχ. ύψος: 100%; επένδυση-κάτω: 90 εικονοστοιχεία; ) . υποσέλιδο (ύψος: 80 εικονοστοιχεία, κορυφή περιθωρίου: -80 εικονοστοιχεία; )

Μέθοδος #3

Αυτή η μέθοδος είναι καλή γιατί, σε αντίθεση με άλλες μεθόδους (εκτός από την 5η), το ύψος του υποσέλιδου δεν έχει σημασία. Εδώ προσομοιώνουμε τη συμπεριφορά ενός πίνακα μετατρέποντας το μπλοκ περιτυλίγματος σε πίνακα και το μπλοκ περιεχομένου σε γραμμή πίνακα (εμφάνιση: πίνακας και εμφάνιση: ιδιότητες πίνακα-γραμμών, αντίστοιχα). Χάρη σε αυτό και το γεγονός ότι το μπλοκ περιεχομένου και όλα τα μητρικά του κοντέινερ έχουν ρυθμιστεί σε ύψος 100%, το περιεχόμενο επεκτείνεται στο πλήρες ύψος του, μείον το ύψος του υποσέλιδου, το οποίο καθορίζεται αυτόματα - η εξομοίωση πίνακα αποτρέπει την επέκταση του υποσέλιδου το ύψος του παραθύρου του προγράμματος περιήγησης.

*( περιθώριο: 0; padding: 0; ) html, σώμα ( ύψος: 100%; ) .wrapper ( οθόνη: πίνακας; ύψος: 100%; ) .content ( εμφάνιση: πίνακας-σειρά; ύψος: 100%; )

Μέθοδος #4

Αυτή η μέθοδος δεν μοιάζει με καμία από τις προηγούμενες και η ιδιαιτερότητά της είναι η χρήση της συνάρτησης CSS calc() και της μονάδας μέτρησης vh, που υποστηρίζονται μόνο από σύγχρονους φυλλομετρητές. Εδώ πρέπει να γνωρίζετε το ακριβές ύψος του υποσέλιδου. 100vh είναι το ύψος του παραθύρου του προγράμματος περιήγησης και 80 px είναι το ύψος του υποσέλιδου. Και χρησιμοποιώντας τη συνάρτηση calc() αφαιρούμε τη δεύτερη τιμή από την πρώτη, πατώντας έτσι το υποσέλιδο προς τα κάτω.

* ( περιθώριο: 0; padding: 0; ) .content ( ελάχ. ύψος: υπολογισμός (100vh - 80px); )

Μέθοδος #5

Αυτή είναι ίσως η καλύτερη μέθοδος από όλες αυτές που παρουσιάζονται, αλλά λειτουργεί μόνο σε σύγχρονα προγράμματα περιήγησης. Όπως και στην τρίτη μέθοδο, το ύψος του υποσέλιδου δεν έχει σημασία.

* ( περιθώριο: 0; padding: 0; ) html, σώμα ( ύψος: 100%; ) .wrapper ( οθόνη: flex; flex-direction: στήλη; ύψος: 100%; ) .content ( flex: 1 0 auto; ) .footer (flex: 0 0 auto; )

Μέθοδος #6

Μια ολόκληρη βιβλιοθήκη για διαφορετικές περιπτώσεις (με χρήση Flexbox)

Γεια σε όλους!

Ο ιστότοπος φαίνεται αισθητικά ευχάριστος εάν όλα τα στοιχεία του είναι στη θέση τους. Ωστόσο, υπάρχουν συχνά περιπτώσεις που όλα φαίνονται να είναι φυσιολογικά, αλλά κάτι δεν πάει καλά... Για παράδειγμα, εάν η σελίδα είναι σύντομη, το υποσέλιδο δεν πιέζεται στο κάτω μέρος της σελίδας, αλλά βρίσκεται εκεί που πρέπει - μετά το κύριο μπλοκ του ιστότοπου. Δεν φαίνεται πολύ ωραίο.

Επομένως, σήμερα θα σας μιλήσουμε για το πώς να πατήσετε το υποσέλιδο του ιστότοπου στο κάτω όριο του παραθύρου του προγράμματος περιήγησης.

Έτσι, θα θέσουμε τις ακόλουθες απαιτήσεις για το υπόγειο:

  • το υποσέλιδο πιέζεται στο κάτω μέρος της οθόνης όταν το ύψος του παραθύρου του προγράμματος περιήγησης είναι μεγαλύτερο από το ύψος της σελίδας, ανεξάρτητα από το περιεχόμενο.
  • το υποσέλιδο βρίσκεται στη σωστή του θέση όταν ο όγκος του περιεχομένου είναι μεγαλύτερος από το ύψος του παραθύρου του προγράμματος περιήγησης.
  • λειτουργεί σε όλα τα δημοφιλή προγράμματα περιήγησης.
  • αξιοπιστία - δεν εξαρτάται από την πολυπλοκότητα της διάταξης.

Για παράδειγμα, ας πάρουμε μια απλή σελίδα που αποτελείται από δύο κύρια μπλοκ: κύριο και υποσέλιδο. Ας βεβαιωθούμε ότι το κύριο μπλοκ καταλαμβάνει ολόκληρη την περιοχή του παραθύρου του προγράμματος περιήγησης, ανεξάρτητα από την ποσότητα του περιεχομένου, ενώ πατάμε το υποσέλιδο στο κάτω μέρος της οθόνης, ώστε να μην εμφανίζεται μια κάθετη γραμμή κύλισης στο πρόγραμμα περιήγησης. Πώς το κάνουμε:

Βήμα 1

Φτιάχνουμε 2 μπλοκ: κύριο (κύριο) και υπόγειο (υποδοχή). Τεντώνουμε το κύριο κοντέινερ σε όλο το ύψος της οθόνης του προγράμματος περιήγησης (ελάχ. ύψος) και προσδιορίζουμε αυστηρά το ύψος του υποσέλιδου (ύψος).

Σε αυτήν την περίπτωση, το συνολικό ύψος του ιστότοπου θα είναι το ύψος της οθόνης + το ύψος του υποσέλιδου.

Βήμα 2

Χρησιμοποιούμε ένα αρνητικό περιθώριο (margin-top) για να «εισέλθει» στο κύριο μπλοκ έτσι ώστε το ύψος του ιστότοπου να είναι μόνο το 100% του ύψους της οθόνης.

Με αυτήν τη διάταξη μπλοκ και με επαρκή ποσότητα περιεχομένου (για παράδειγμα, κείμενο) στο κύριο μπλοκ, είναι δυνατή η επικάλυψη του περιεχομένου στο κύριο μπλοκ στο υποσέλιδο:

Βήμα 3

Για να αποφύγετε αυτό το πιθανό πρόβλημα, προσθέστε ένα κενό μπλοκ στο τέλος του κύριου μπλοκ, το ύψος του οποίου δεν είναι μικρότερο από το ύψος του υποσέλιδου (ή καλύτερα, λίγο περισσότερο, ώστε να υπάρχει κάποιο διάστημα μεταξύ του περιεχομένου και του υποσέλιδο):

Τώρα, εάν υπάρχει πολύ περιεχόμενο, θα μετακινήσει το κενό μπλοκ προς τα κάτω. Και αυτό θα χαμηλώσει το υποσέλιδο, αποτρέποντας την προσαρμογή περιεχομένου σε αυτό.

Ας δούμε πώς φαίνεται στον κώδικα:

<html > <κεφάλι > <τίτλος >Το υποσέλιδο πιέζεται προς τα κάτω</τίτλος> <style type = "text/css" >* (περιθώριο: 0, συμπλήρωση: 0;) /* επαναφορά συμπλήρωσης */ body ( φόντο: #fff;) html,body ( ύψος: 100%; /* ορίστε το ύψος του σώματος του εγγράφου */).main ( / * κύριο μπλοκ , το οποίο πρέπει να εκτείνεται μέχρι το υποσέλιδο */ φόντο: #999; /* χρώμα φόντου του κύριου μπλοκ (για λόγους σαφήνειας) */ ελάχ. ύψος: 100%, /* ορίστε το ελάχιστο ύψος του κύριου μπλοκ */ ) * html .main ( /* hack για ie6 */ ύψος: 100%; /* για ie6, επειδή δεν καταλαβαίνει min-height */).hFooter ( /* αυτό είναι ένα διαχωριστικό στο κύριο μπλοκ - δεσμεύουμε χώρος για το υπόγειο */ ύψος: 40 εικονοστοιχεία; /* ύψος: το υποσέλιδο μας */).Υποσέλιδο ( /* υποσέλιδο */ φόντο: #0000CC; /* χρώμα φόντου υποσέλιδου (για σαφήνεια) */ χρώμα: #fff; ύψος: 40 εικονοστοιχεία ; /* ύψος υποσέλιδου */ margin-top: -40 px ; /* κάντε μια αρνητική εσοχή σε ύψος ίση με το ύψος του υποσέλιδου για να ταιριάζει σαφώς στο μέγεθος της οθόνης */)</στυλ> </κεφάλι> <σώμα > <div class = "κύριος" >Αυτό είναι το κύριο μπλοκ<div class = "hFooter" > </div> <div class = "υποδήλατο" >Αυτό είναι το υπόγειο</div> </σώμα> </html>

Σημείωση: όταν χρησιμοποιείτε διάταξη μπλοκ και αιωρούμενα κύρια μπλοκ (στήλες) για .hFooter, θα πρέπει να προσθέσετε clear: και τα δύο έτσι ώστε το υποσέλιδο να βρίσκεται κάτω από τις στήλες.:

.hFooter ( καθαρό : και τα δύο ; ύψος : 40 εικονοστοιχεία ; )

Εάν έχετε ήδη κατακτήσει λίγο, τότε μπορεί να προκύψει το ερώτημα: "Γιατί να χρησιμοποιήσετε ένα πρόσθετο στοιχείο όταν μπορείτε να χρησιμοποιήσετε το padding-bottom;"

Η απάντηση είναι ότι δεν μπορείτε να το χρησιμοποιήσετε μόνο εδώ, καθώς το μέγεθος του μπλοκ είναι ίσο με τις διαστάσεις του + το πλάτος της εσωτερικής επένδυσης + το πλάτος των περιγραμμάτων. Ένας συνδυασμός ελάχιστου ύψους: 100% και padding-bottom θα δώσει στο ύψος του ιστότοπου μεγαλύτερο από το ύψος της οθόνης. Ως αποτέλεσμα, ακόμα κι αν δεν υπάρχει καθόλου περιεχόμενο, το υποσέλιδο θα είναι εκτός οθόνης.

Το μειονέκτημα αυτής της τεχνικής είναι η χρήση ενός επιπλέον κενού στοιχείου hFooter. Σε πραγματικές συνθήκες (όταν το περιεχόμενο του ιστότοπου δεν είναι κενό και χρησιμοποιείται διάταξη μπλοκ), αυτό μπορεί να αποφευχθεί με τη χρήση αυτής της τεχνικής για να βοηθήσει στην εκκαθάριση της ροής χωρίς τη χρήση πρόσθετου στοιχείου και να αποτρέψει την παρεμβολή του περιεχομένου στο υποσέλιδο, θα γράψουμε padding-bottom στις στήλες.

Προβλήματα με τα επίπεδα z

Στην τεχνική που περιγράφεται παραπάνω, το υποσέλιδο ανυψώθηκε με αρνητική εσοχή προς τα πάνω. Αυτό εγείρει ένα πιθανό πρόβλημα με τα z-layers. Για παράδειγμα, πρέπει να εμφανίσουμε ένα αναδυόμενο παράθυρο (ας είναι div), το οποίο θα τοποθετηθεί σε σχέση με το κύριο κοντέινερ.

<div class = "κύριος" > [...] <div class = "αναδυόμενο παράθυρο" > [...] </div> </div> <div class = "υποδήλατο" > [...] </div>
.main ( position : relative ; z-index : 1 ; /* z-index μικρότερος από αυτόν του υποσέλιδου ώστε να είναι ορατό */) .popup (θέση: απόλυτη; z-index: 100; [...]) .footer (ύψος: 50 px; margin-top: -50 px; θέση: σχετική; /* ώστε να μπορείτε να ορίσετε z-index */ z-index: 2; /* περισσότερο από το κύριο για να είναι ορατό */}

Όλα είναι καλά μέχρι να διασταυρωθούν το αναδυόμενο παράθυρο και το υποσέλιδο μας (και αυτή η κατάσταση συμβαίνει αρκετά συχνά) - εδώ αρχίζουν τα προβλήματα. Παρά το γεγονός ότι το αναδυόμενο παράθυρο έχει τον υψηλότερο δείκτη z, θα επικαλύπτεται από το υποσέλιδο, επειδή το γονικό αναδυόμενο παράθυρο έχει δείκτη z χαμηλότερο από το υποσέλιδο:

Σε αυτήν την περίπτωση, πρέπει να αναζητήσετε μια ευκαιρία να τοποθετήσετε το παράθυρο όχι σε σχέση με το κύριο, αλλά σε σχέση με κάποιο άλλο θυγατρικό στοιχείο που βρίσκεται μέσα στο κεντρικό. Έτσι, θα απαλλαγούμε από τον καθορισμό του δείκτη z για κύριο και υποσέλιδο. Αλλά αυτή η επιλογή δεν είναι πάντα δυνατή, οπότε ας εξετάσουμε τη δεύτερη επιλογή του πατήματος του υποσέλιδου.

Λύση 2 - απόλυτη τοποθέτηση

Η ιδέα είναι παρόμοια με τη λύση 1:

  • Τεντώνουμε το κύριο μπλοκ σε όλο το ύψος της οθόνης.
  • Διατηρούμε χώρο για το υπόγειο.
  • Σε σχέση με το κύριο μπλοκ, τοποθετούμε το υπόγειο στο κάτω μέρος χρησιμοποιώντας απόλυτη τοποθέτηση.

HTML:συγγενής ; /* έτσι ώστε τα θυγατρικά στοιχεία να τοποθετούνται σε σχέση με αυτό το μπλοκ */) .footer (ύψος : 50 εικονοστοιχεία ; θέση : απόλυτη ; αριστερά : 0 , κάτω : 0 , πλάτος : 100% ; ) * html .footer ( bottomy : έκφραση(parentNode.offsetHeight % 2 ? style.bottom= "-1px" : style.bottom= "0px" ); /* hack για e6, το οποίο έχει ένα jamb με μετατόπιση 1 px */}

Αυτή η προσέγγιση θα λύσει το πρόβλημα με τα αναδυόμενα παράθυρα, επειδή... τόσο το υποσέλιδο όσο και το αναδυόμενο παράθυρο θα έχουν έναν κοινό γονέα, πράγμα που σημαίνει ότι δεν θα υπάρχουν εκπλήξεις με τα z-layers.

Το μειονέκτημα και των δύο μεθόδων είναι ότι και οι δύο μέθοδοι είναι κατάλληλες μόνο για υπόγειο με σταθερό ύψος.

Αυτά για σήμερα. Τώρα ξέρετε πώς να πατάτε το υποσέλιδο στο κάτω μέρος της οθόνης με διαφορετικούς τρόπους και ποια προβλήματα μπορεί να προκύψουν.

Εγγραφείτε στις ενημερώσεις και αναμένετε νέες ενδιαφέρουσες δημοσιεύσεις. Αντίο.

  • Φροντιστήριο

Όλοι όσοι είναι συνηθισμένοι σε πλήρως σχεδιασμένες σελίδες ιστοτόπων προτιμούν την εμφάνιση κάτι «καρφωμένου» (κολλώδους) στο κάτω μέρος του υποσέλιδου της σελίδας. Υπάρχουν όμως δύο προβλήματα στο Διαδίκτυο: τα πεδία εισαγωγής που δεν μεγαλώνουν προς τα κάτω και τα υποσέλιδα που δεν είναι καρφωμένα (στο κάτω μέρος του παραθύρου). Για παράδειγμα, όταν ανοίγουμε σύντομες σελίδες όπως το habrahabr.ru/settings/social, φαίνεται αμέσως ότι οι πληροφορίες που προορίζονται να βρίσκονται στο κάτω μέρος του παραθύρου προβολής προσκολλώνται στο περιεχόμενο και βρίσκονται κάπου στη μέση ή ακόμα και στο το επάνω μέρος του παραθύρου όταν το κάτω μέρος είναι άδειο.

Έτσι, αντί για .
Αυτός ο οδηγός για αρχάριους σχεδιαστές διάταξης θα δείξει πώς να φτιάξετε ένα «καρφωμένο» υποσέλιδο σε 45 λεπτά, διορθώνοντας τις ελλείψεις ακόμη και μιας τόσο αξιόπιστης δημοσίευσης όπως το Habr, και να το ανταγωνιστείτε στην ποιότητα εκτέλεσης του πολλά υποσχόμενου έργου σας.

Ας δούμε την υλοποίηση ενός τύπου καρφωμένου υποσέλιδου, που έχει ληφθεί από το δίκτυο και ας προσπαθήσουμε να καταλάβουμε τι συμβαίνει. css-tricks.com/snippets/css/sticky-footer
CSS:
* ( margin:0; padding:0; ) html, body, #wrap (ύψος: 100%; ) body > #wrap (ύψος: auto; min-height: 100%;) #main ( padding-bottom: 150px; ) /* πρέπει να έχει το ίδιο ύψος με το υποσέλιδο */ #footer ( θέση: σχετική; margin-top: -150 px; /* αρνητική τιμή ύψους υποσέλιδου */ ύψος: 150 px; clear:both;) /* CLEAR FIX* / .clearfix:after (περιεχόμενο: "."; εμφάνιση: μπλοκ; ύψος: 0; καθαρό: και τα δύο; ορατότητα: κρυφό;) .clearfix (εμφάνιση: inline-block;) /* Απόκρυψη από το IE-mac \*/ * html .clearfix (ύψος: 1%;).clearfix (εμφάνιση: μπλοκ;) /* Τέλος απόκρυψης από IE-mac */
HTML:

Είναι απίθανο όλοι, ακόμη και όσοι γνωρίζουν CSS, κοιτάζοντας αυτόν τον κώδικα, να κατανοήσουν τις αρχές και να επεξεργαστούν με σιγουριά ένα περίπλοκο έργο. Οποιοδήποτε βήμα στο πλάι θα οδηγήσει σε παρενέργειες. Η συζήτηση και η κατασκευή του υποσέλιδου παρακάτω έχει σκοπό να παρέχει περισσότερη κατανόηση των κανόνων του CSS.

Ας ξεκινήσουμε με τη θεωρία

Η συνήθης υλοποίηση ενός καρφωμένου υποσέλιδου βασίζεται στη μοναδική ιδιότητα CSS2 ότι τα στοιχεία είναι άμεσα παιδιά του ΣΩΜΑ- διατήρηση ποσοστού ύψους ( ύψος: 100%ή άλλο) σε σχέση με το παράθυρο, εάν όλοι οι γονείς τους έχουν το ίδιο ποσοστό ύψους, ξεκινώντας από την ετικέτα HTML. Προηγουμένως, χωρίς doctypes, αλλά τώρα στη λειτουργία Quirks, τα ποσοστιαία ύψη στοιχείων υποστηρίζονται σε οποιοδήποτε επίπεδο και στους σύγχρονους τύπους doctypes - μόνο εντός στοιχείων που καθορίζονται από το ποσοστό. Επομένως, εάν κάνουμε ένα μπλοκ περιεχομένου (ας το ονομάσουμε #διάταξη) έχοντας 100% ύψος, θα κάνει κύλιση σαν να ήταν παράθυρο. Όλο το περιεχόμενο (με ροή) τοποθετείται σε αυτό, εκτός από το υποσέλιδο και ίσως την κεφαλίδα.

Το υποσέλιδο τοποθετείται μετά από αυτό το μπλοκ και του δίνονται 0 pixel ύψους. Σε γενικές γραμμές, μπορείτε να ακολουθήσετε #διάταξητοποθετήστε όσα μπλοκ θέλετε, αλλά θα πρέπει όλα να έχουν ύψος 0 pixel ή εκτός της ροής του εγγράφου (όχι θέση: στατική). Και υπάρχει ένα άλλο σημαντικό κόλπο που χρησιμοποιείται συνήθως. Δεν είναι απαραίτητο να κάνετε το ύψος ίσο με 0. Μπορείτε να κάνετε το ύψος σταθερό, αλλά να το αφαιρέσετε από το κύριο μπλοκ χρησιμοποιώντας την ιδιότητα περιθώριο-κάτω: -(ύψος);.

Με ανθρώπινους όρους, τα στυλ δημιουργούν μια άδεια «τσέπη» στο κάτω μέρος, στην οποία εισάγεται το υποσέλιδο και καταλήγει πάντα είτε κολλημένο στο κάτω περίγραμμα του παραθύρου είτε στο κάτω περίγραμμα του εγγράφου, εάν το ύψος του το έγγραφο είναι μεγαλύτερο από το ύψος του παραθύρου. Υπάρχουν πολλές υλοποιήσεις υποσέλιδου στο Διαδίκτυο και στο Habré, με διαφορετικούς βαθμούς επιτυχίας σε όλα τα προγράμματα περιήγησης. Ας συνεχίσουμε να το χτίζουμε μόνοι μας, χρησιμοποιώντας τη διάταξη του Habr ως «άλογο εργασίας».

Επειδή το κάτω μέρος του μπλοκ #διάταξη- αυτή είναι μια τσέπη, για το υποσέλιδο θα πρέπει να είναι άδεια, να μην εμφανίζει αντικείμενα σελίδας. Και εδώ συναντάμε έναν άλλο περιορισμό - δεν μπορούμε να δημιουργήσουμε μια άδεια τσέπη σε βάρος του υλικό παραγεμίσματος V #διάταξη, γιατί τότε θα γίνει πάνω από 100%. Ούτε θα σε σώσει περιθώριο- Το κενό πρέπει να δημιουργηθεί χρησιμοποιώντας τις ιδιότητες των ένθετων στοιχείων. Επιπλέον, είναι απαραίτητο να διασφαλιστεί ότι τα αιωρούμενα στοιχεία δεν σέρνονται κάτω από το περίγραμμα του μπλοκ, κάτι που γίνεται, για παράδειγμα, από το μπλοκ

, Οπου .clear(clear:και τα δύο). Είναι σημαντικό είτε αυτό" ύψοςΤο " διορθώθηκε, είτε στις ίδιες σχετικές μονάδες, είτε θα το υπολογίζαμε κατά τις αλλαγές σελίδας. Συνήθως είναι βολικό να συνδυάσετε αυτό το μπλοκ ευθυγράμμισης με τη ρύθμιση του στο απαιτούμενο ύψος.

Ας δούμε τη δομή των σελίδων του εξεταζόμενου μας. Ο ευκολότερος τρόπος για να το κάνετε αυτό είναι να ανοίξετε το παράθυρο του Firebug ή ένα παρόμοιο παράθυρο (Εργαλεία προγραμματιστή (Ctrl-F12)) στο Chrome.

...Κορυφαίο διαφημιστικό μπλοκ...

Ας προχωρήσουμε σε ένα παράδειγμα εργασίας

Ποιες βλέπουμε; ελαττώματα διάταξηςόσον αφορά την υλοποίηση του εφέ ενός καρφωμένου υποσέλιδου; Το βλέπουμε αυτό
1) Το υποσέλιδο στον ιστότοπο βρίσκεται μέσα σε ένα μπλοκ με id=layout, το οποίο δεν έχει ποσοστό ύψους. Σύμφωνα με τη θεωρία, αυτός, οι γονείς και το περιεχόμενο block.content-left πρέπει να ορίσουν το ύψος στο 100%. Προκύπτουν προβλήματα με το τελευταίο - δεν είναι κατάλληλο για αυτό. Κατά συνέπεια, λείπει ένα μπλοκ ενδιάμεσου επιπέδου ή το υποσέλιδο δεν βρίσκεται στο σωστό επίπεδο. Εκτός,
2) Το ύψος του υποσέλιδου είναι μεταβλητό (ανάλογα με τον αριθμό των στοιχείων στη λίστα και το μέγεθος της γραμματοσειράς, αυτό δεν φαίνεται από το HTML, αλλά από το CSS). ΚΑΙ
3) πάνω από #διάταξηυπάρχει ένα διαφημιστικό μπλοκ με σταθερό ύψος 90 px.
4) δεν υπάρχουν μπλοκ ευθυγράμμισης ούτε στο υποσέλιδο ούτε (γενικά μιλώντας) στο μπλοκ #διάταξη(ναι, αλλά πάνω από το μπλοκ .rotated_posts; ωστόσο, ίσως θα έπρεπε να ταξινομηθεί ως υποσέλιδο).

Σημείο 4 - θα πρέπει να το σχεδιάσετε με ένα σενάριο.
Φαίνεται εύκολο να αντιμετωπίσετε το τρίτο σημείο προσθέτοντας #layout(margin-top:-90px;) Αλλά να θυμάστε ότι αυτό το μπλοκ μπορεί να μην υπάρχει - καταστέλλεται από την κοπή banner ή οι διαφημιστές αποφασίζουν ξαφνικά να μην το εμφανίσουν. Υπάρχει ένας αριθμός σελίδων στον ιστότοπο όπου δεν υπάρχει. Επομένως η εξάρτηση περιθώριο-κορυφήαπό ένα μπλοκ διαφημίσεων είναι κακή ιδέα. Είναι πολύ καλύτερο να το τοποθετήσετε μέσα #διάταξη- τότε δεν θα παρέμβει σε τίποτα.

Το πρώτο σημείο είναι ότι για να λειτουργήσει καθόλου το καρφωμένο υποσέλιδο, πρέπει να τοποθετήσετε ένα μπλοκ υποσέλιδου κάτω από #διάταξη. Ωστόσο, με τη βοήθεια της javascript μπορείτε να εφαρμόσετε άλλα σχήματα καρφωμένων υποσέλιδων, αλλά σε κάθε περίπτωση χρειάζεστε JS ή αρχικά σωστή διάταξη για να το κάνετε χωρίς αυτό.

Δεδομένου ότι δεν μπορούμε να είμαστε πιο δυνατοί από τον πιο πρόσφατο σχεδιαστή διάταξης ιστότοπου που «χτύπησε» το υποσέλιδο μέσα στο περιεχόμενο, θα αφήσουμε στην άκρη την ιδέα της σωστής τοποθέτησης του υποσέλιδου στον μελλοντικό μας ιστότοπο (ο οποίος, επομένως, θα είναι πιο «ψαγμένος» παρά Habr!), και θα αναλύσουμε το Habr με javascript (σενάριο χρήστη) στη σωστή μία συνθήκη. (Ας πούμε αμέσως ότι δεν φταίει ο σχεδιαστής διάταξης ή ο εναλλάκτης, αλλά ο τύπος της τοποθεσίας, φυσικά, καθορίζει τη στρατηγική απόφαση της διαχείρισης του έργου.) Με αυτόν τον τρόπο δεν θα πετύχουμε το ιδανικό, γιατί στην πρώτα ή δύο δευτερόλεπτα κατά τη διαδικασία φόρτωσης η σελίδα θα έχει λανθασμένη διάταξη. Αλλά αυτό που είναι σημαντικό για εμάς είναι η ιδέα και η ευκαιρία να ξεπεράσουμε σε ποιότητα την πιο δημοφιλή ιστοσελίδα στον κόσμο της πληροφορικής.

Επομένως, στη σωστή θέση στο σενάριο (νωρίς, στο τέλος της φόρτωσης της σελίδας), θα γράψουμε μεταφορές των μπλοκ διαφημίσεων DOM και υποσέλιδου στα σωστά σημεία. (Ας είμαστε προετοιμασμένοι για το γεγονός ότι, λόγω των σεναρίων χρήστη, η λύση θα είναι πιο περίπλοκη από μια καθαρή λύση.)
var dQ = function(q)(return document.querySelector(q);) //για συντόμευση var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer" ) if(topL && lay) //banner - μέσα στο μπλοκ περιεχομένου lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //μετακίνηση του υποσέλιδου lay.parentNode.insertBefore(footer, lay.nextSibling);
Τοποθετήσαμε τα μπλοκ στις θέσεις τους - τώρα το μόνο που μένει είναι να εκχωρήσουμε τις απαραίτητες ιδιότητες στα στοιχεία. Το ύψος του υποσέλιδου θα πρέπει να ρυθμιστεί ακριβώς, απλώς επειδή το γνωρίζουμε ήδη από τη στιγμή που είναι ενεργό το σενάριο χρήστη (τέλος φόρτωσης σελίδας). Λόγω του σημείου ενεργοποίησης του userscript, όπως αναφέρθηκε παραπάνω, ένα άλμα στην εμφάνιση του υποσέλιδου στη σελίδα είναι αναπόφευκτο. Μπορείτε να προσπαθήσετε να βάλετε ένα «καλό πρόσωπο», αλλά με ένα «κακό παιχνίδι»; Για τι? Το "κακό παιχνίδι" του ιστότοπου σας επιτρέπει να δημιουργήσετε μια ιδέα χωρίς επιπλέον προσπάθεια, η οποία θα είναι αρκετή για να αξιολογήσετε την ποιότητα και δεν θα χρειαστείτε για το "σωστό παιχνίδι" στο έργο σας.
if(foot)( //block-aligner

στο υποσέλιδο h.apnd_el((clss:"clear", appendTo: footer)); var footH = foot.offsetΎψος; //...και μετρήστε το ύψος του υποσέλιδου ) if(topL && lay && footer && lay.nextSibling)( //στοίχιση μπλοκ του απαιτούμενου ύψους στο περιεχόμενο ("διάταξη") h.apnd_el((clss:" clear", css:( height: (footH ||0) +"px"), appendTo: lay)); lay.style.minHeight ="100%"; h.addRules("#layout(margin-bottom:- "+ footH +"px !important)html, σώμα (ύψος:100%)"); )
Εδώ επιτρέψαμε στον εαυτό μας να χρησιμοποιήσει μια αυτο-γραμμένη συνάρτηση h.apnd_el, το οποίο κάνει περίπου το ίδιο πράγμα όπως στο jQuery -
$("
").css((ύψος: footH ||0)).appendTo($(footer))
Και μετά - μια άλλη τυπική λειτουργία εφαρμογής κανόνων CSS - h.addRules. Δεν μπορείτε να κάνετε χωρίς αυτό εδώ, γιατί πρέπει να δηλώσετε έναν κανόνα με το " !σπουδαίος" - ακριβώς λόγω των ιδιαιτεροτήτων των προτεραιοτήτων των στυλ από το σενάριο χρήστη.

Με αυτά τα κομμάτια κώδικα, θα μπορούμε να δούμε το καρφωμένο υποσέλιδο στο userscript (αφού μεταπηδήσουμε προς τα κάτω) και να κατανοήσουμε πλήρως πώς να δημιουργήσουμε τη διάταξη της σελίδας. Η χρήση σχεδίου άλματος σε καθημερινή βάση είναι δυσάρεστη, επομένως συνιστάται να το κάνετε αποκλειστικά για επίδειξη και δοκιμή. Στο σενάριο χρήστη HabrAjax, εγκατέστησα ένα παρόμοιο σενάριο, κλείνοντάς το με τη ρύθμιση "underFooter" (επιλέξτε το πλαίσιο στη λίστα ρυθμίσεων πριν από το "footer nailed to the bottom"), ξεκινώντας από την έκδοση 0.883_2012-09-12.

Επηρεάζει το κάρφωμα του υποσέλιδου την ανάγκη ενημέρωσης των στυλ ZenComment εάν είναι εγκατεστημένα; Ναι είναι.Λόγω της πολύπλοκης αλυσίδας προτεραιοτήτων στυλ, στην οποία τα στυλ που εισάγονται από το σενάριο χρήστη έχουν τη χαμηλότερη προτεραιότητα, έπρεπε να προσαρμόσουμε ελαφρώς τα στυλ χρήστη για δυνατότητεςεργασία με καρφωμένο υποσέλιδο. Εάν δεν ενημερώσετε τα στυλ χρήστη σας (στο 2.66_2012-09-12 +), το υποσέλιδο δεν θα λειτουργήσει με ακρίβεια.

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ rotated_post (τρεις δημοφιλείς αναρτήσεις από το παρελθόν) φαίνεται πιο λογικό με υποσέλιδο, οπότε στο πραγματικό σενάριο μεταφέρεται και στο υποσέλιδο.

Το δεύτερο σημείο (από τη λίστα των ελλείψεων διάταξης) είναι μια συζήτηση καθαρά για το Habr (δεν ισχύει για το σενάριο χρήστη και επαναλαμβάνει εν μέρει τα προηγούμενα).

Οι σελίδες έχουν ένα πρόβλημα που τους εμποδίζει να δημιουργήσουν ένα καρφωτό υποσέλιδο χρησιμοποιώντας καθαρό CSS - ένα απροσδιόριστο ύψος υποσέλιδου ανάλογα με τα προεπιλεγμένα μεγέθη γραμματοσειράς στο πρόγραμμα περιήγησης. Για να εφαρμόσετε ένα υποσέλιδο χρησιμοποιώντας CSS, πρέπει να επιλέξετε τα σχετικά ύψη των γραμματοσειρών, αλλά ενδέχεται να μην λειτουργούν εάν ο υπολογιστής του χρήστη δεν διαθέτει τις απαιτούμενες γραμματοσειρές. Επομένως, η λύση πρέπει να περιλαμβάνει μια JavaScript που μπορεί να προσαρμόσει την κατά προσέγγιση θέση του υποσέλιδου στην ακριβή θέση χρησιμοποιώντας μεταβάσεις. Ή, αφού εξετάσετε την αποδοχή της λύσης που δημιουργήθηκε σε ένα σενάριο χρήστη σε διαφορετικές πλατφόρμες, κάντε μια υπολογισμένη εγκατάσταση ενός καρφωμένου υποσέλιδου - οι πρώτες παρατηρήσεις δείχνουν ότι η λύση είναι πρακτική.

Συμπέρασμα: είναι δυνατό να σχεδιάσετε πλήρως μια διάταξη στο Habré, αλλά για αυτό χρειάζεστε έναν σχεδιαστή διάταξης που κατανοεί σαφώς τη συμπεριφορά της διάταξης και τοποθετεί τα μπλοκ στη σωστή σειρά. (Αυτή τη στιγμή, το υποσέλιδο και το επάνω banner είναι "σε λάθος θέση" και όχι με τέτοιο τρόπο ώστε να μπορείτε απλώς να κάνετε στυλ στο υποσέλιδο.) Μπορείτε να κάνετε χωρίς JS εάν ορίσετε το ύψος του υποσέλιδου σε σχετικές μονάδες, λαμβάνοντας μερικές χώρος για αβεβαιότητα γραμματοσειράς.

Εκτέλεση

Εάν ενεργοποιήσετε το HabrAjax 0.883+, θα δούμε το "καρφωμένο υποσέλιδο" να λειτουργεί. Προσαρμόζεται σε ύψος χρησιμοποιώντας σενάρια. Σας επιτρέπει να αξιολογήσετε πόσο καλύτερες σελίδες με καρφωμένο υποσέλιδο σε σύγκριση με τις κανονικές. Τα στυλ χρήστη ZenComment είναι συμβατά με σενάρια, αλλά για να λειτουργεί σωστά το καρφωμένο υποσέλιδο με αυτά, πρέπει να εγκαταστήσετε το ZenComment έκδοση 2.66_2012-09-12 +.

Στοιχεία σχετικά με τη συμπεριφορά υλοποίησης

Ο σαμανισμός με υποσέλιδο, στυλ και σενάρια είναι σαμανισμός (υποστηρίζεται μόνο από τη θεωρία). Η συμπεριφορά είναι ελαφρώς διαφορετική σε διαφορετικά προγράμματα περιήγησης, αλλά σε ορισμένα σημεία είναι απροσδόκητη. Χωρίς σενάρια χρήστη και μπλοκ αναδιάταξης, τα αποτελέσματα θα είναι διαφορετικά. Αυτό απέδωσαν τα πειράματα με την υλοποίηση στο σενάριο χρήστη.

1) Firefox - απροσδόκητη έλλειψη άλματος υποσέλιδου. Είναι περίεργο που δεν υπάρχουν - η απόδοση πραγματοποιείται αφού το υποσέλιδο τοποθετηθεί στο κάτω μέρος.

2) Chrome - με εξέπληξε με την "περιπλανώμενη κύλιση" - κενά κενά στο κάτω μέρος προστίθενται στη σελίδα με περίοδο μία φορά το δευτερόλεπτο - κάτι λάθος συμβαίνει με τον υπολογισμό των υψών. Η λύση είναι να γράψετε html,body(ύψος:100%) στο στυλ χρήστη, αλλά δεν υπάρχει καμία εγγύηση ότι θα λειτουργεί πάντα. Είναι πιο αξιόπιστο να ελέγχετε εάν το έγγραφο δεν υπερβαίνει το ύψος του παραθύρου και αν δεν υπερβαίνει, τότε μετακινήστε το υποσέλιδο, διαφορετικά - τίποτα. Το άλμα είναι εντάξει, υπάρχει.

3) Opera - χωρίς άλματα (έκδ. 12.02) όταν η σελίδα φορτώνεται για πρώτη φορά, αλλά μια βιαστική επαναφόρτωση μπορεί να εμφανίσει άλμα στο υποσέλιδο. Διαφορετικά δεν συμπεριφέρεται λιγότερο σωστά από το Fx.

Λοιπόν, θα πρέπει να διδάξετε ειδικά στο Chrome να συμπεριφέρεται σωστά (με ένα σενάριο) και να διαθέσετε την έκδοση σε αυτήν τη φόρμα για προβολή. Επομένως, η ενότητα στο σενάριο χρήστη είναι λίγο πιο περίπλοκη από αυτή που δίνεται στο άρθρο.

Θα πρέπει να υπενθυμίσουμε ότι αυτή δεν είναι μια ολοκληρωμένη υλοποίηση - δεν λαμβάνει υπόψη, για παράδειγμα, περιπτώσεις αλλαγής μεγέθους παραθύρου από τον χρήστη. Μπορείτε επίσης να βρείτε σπάνιους (στην πράξη) συνδυασμούς αλλαγής ύψους υποσέλιδου πριν και μετά τη μετακίνηση, όπου η λογική αρχίζει να αποτυγχάνει χωρίς να προκαλεί ταλαιπωρία. Οι ελλείψεις αφέθηκαν εσκεμμένα, επειδή διατηρήθηκε μια ισορροπία μεταξύ της πολυπλοκότητας της βελτίωσης και του προσωρινού χαρακτήρα της λύσης.

Ως αποτέλεσμα, έχουμε ένα πλήρως εφαρμόσιμο σχέδιο λειτουργίας, τουλάχιστον για γρήγορους επιτραπέζιους υπολογιστές. Εάν εντοπιστεί λανθασμένη συμπεριφορά του υποσέλιδου, η ρύθμιση "underFooter" θα πρέπει να απενεργοποιηθεί.

Σε ποιες σελίδες είναι χρήσιμο αυτό;

Σε έναν τυπικό ιστότοπο, χωρίς στυλ χρήστη, ακόμη και οι σύντομες σελίδες ερωτήσεων και απαντήσεων είναι μεγαλύτερες από 1500 εικονοστοιχεία, κάτι που στις περισσότερες περιπτώσεις είναι απαρατήρητο με οριζόντιες οθόνες. Αλλά ακόμα και με τις συνηθισμένες οθόνες, συναντάτε συχνά προσωπικές σελίδες χρήστη με ύψος περίπου 1300 pixel, όπου το μη προσαρτημένο υποσέλιδο εμφανίζεται σε όλο του το μεγαλείο. Ο αριθμός των σελίδων στις ρυθμίσεις χρήστη δεν είναι επίσης πολύ μεγάλος.

Εάν χρησιμοποιείτε στυλ χρήστη ZenComment, μειώνουν σημαντικά το απαιτούμενο ύψος σελίδας και το σενάριο χρήστη HabrAjax ενδέχεται να μην εμφανίζει ορισμένα ή όλα τα πλαϊνά μπλοκ στην πλαϊνή γραμμή. Επομένως, με σενάρια και στυλ, παρατηρείται αισθητά πιο συχνά το εφέ ενός μη προσαρτημένου υποσέλιδου. Επομένως, είναι λογικό ότι η επιδιόρθωση υποσέλιδου εμφανίστηκε στο HabrAjax για πρώτη φορά. Αλλά ένας κανονικός ιστότοπος έχει επίσης έναν αριθμό σελίδων όπου ένα καρφωμένο υποσέλιδο θα ήταν χρήσιμο.

Θα υπάρξει υποστήριξη;

Η συμπεριφορά του ιστότοπου τον περασμένο χρόνο δείχνει ότι οι προγραμματιστές (και επομένως η διαχείριση) άρχισαν να εισάγουν λειτουργίες που προηγουμένως υπήρχαν μόνο σε σενάρια χρήστη και στυλ χρήστη. Για παράδειγμα, στην αρχή του χρόνου έγραψα όπου συγκέντρωσα πολλές μικρές ευχές. Έξι μήνες αργότερα, επέστρεψα σε αυτό και με χαρά παρατήρησα (ακριβώς στο κείμενο, μπορείτε να δείτε το "UPD" και τις ημερομηνίες) ότι μια σειρά από χαρακτηριστικά που περιγράφονται ως επιθυμίες είχαν ήδη εφαρμοστεί στον ιστότοπο.

Στη συνέχεια, ας δούμε τα «βέλη» αντί για τα τετράγωνα για σχόλια βαθμολογίας. Εμφανίστηκαν στα ονόματα χρήστη almalexa ("Prettifier") πριν από 3 χρόνια και υιοθετήθηκαν στο ZenComment πριν από 2 χρόνια. Πριν 2-3 μήνες περίπου εμφανίστηκαν στο site. Αρχίζει κανείς να πιστεύει ότι μετά από κάποιο χρονικό διάστημα τα βέλη θα απέχουν κάποια απόσταση μεταξύ τους, όπως γίνεται στο ZenComment (ένα βέλος στα αριστερά του αριθμού, το δεύτερο προς τα δεξιά) για να χάσει λιγότερα. Προσθέστε ετικέτες