Πώς να κρατήσετε το υποσέλιδο σας εκεί που ανήκει;

Αυτή η ανάρτηση είναι επίσης διαθέσιμη στα Κορεατικά .

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

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

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

Αυτό δείχνει τη συμπεριφορά που δεν θέλουμε και θέλουμε:

Ας δούμε μια προσέγγιση για να το επιτύχουμε αυτό.

Αποκτήστε τον έλεγχο του υποσέλιδου σας

index.html:

main.css:

#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }

Τι κάνει λοιπόν;

  • Η page-containerπηγαίνει γύρω από τα πάντα στη σελίδα, και καθορίζει το ελάχιστο ύψος του 100% του ύψους παράθυρο ( vh). Όπως είναι relative, τα θυγατρικά του στοιχεία μπορούν να ρυθμιστούν με absoluteβάση τη θέση τους αργότερα.
  • Το content-wrapκάτω μέρος είναι το ύψος του υποσέλιδου, διασφαλίζοντας ότι απομένει αρκετός χώρος για το υποσέλιδο μέσα στο δοχείο στο οποίο βρίσκονται και οι δύο. Εδώ divχρησιμοποιείται ένα περιτύλιγμα που θα περιέχει όλο το περιεχόμενο της σελίδας.
  • Το footerέχει οριστεί σε absolute, να κολλήσει με το bottom: 0του page-containerείναι μέσα. Αυτό είναι σημαντικό, καθώς δεν absoluteαφορά τη θύρα προβολής, αλλά θα μετακινηθεί προς τα κάτω εάν page-containerείναι ψηλότερο από το σημείο προβολής. Όπως αναφέρθηκε, το ύψος του, αυθαίρετα ρυθμισμένο 2.5remεδώ, χρησιμοποιείται στο content-wrapπάνω μέρος του.

Και εκεί το έχετε. Το υποσέλιδο σας παραμένει τώρα εκεί που θα περιμένατε!

Τελικές πινελιές

Φυσικά, αυτό είναι CSS, οπότε δεν θα ήταν πλήρες χωρίς κάποιες εκτιμήσεις UX για κινητά και μια εναλλακτική προσέγγιση χρησιμοποιώντας min-height: 100%αντί 100vh. Αλλά αυτό έχει τα δικά του μειονεκτήματα.

Το Flexbox (με flex-grow) ή το πλέγμα μπορεί επίσης να χρησιμοποιηθεί και είναι και τα δύο πολύ ισχυρά.

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

Ευχαριστώ για την ανάγνωση. Εδώ είναι μερικά άλλα πράγματα που έγραψα πρόσφατα:

  • Ένας οδηγός για αρχάριους στην υπηρεσία Elastic Container της Amazon
  • Δοκιμαστική αντίδραση με Jest και Enzyme