Μια συχνή ερώτηση στο σχεδιασμό της ιστοσελίδας είναι "πώς ρυθμίζετε το ύψος ενός στοιχείου στο 100%";
Αυτό μπορεί να φαίνεται σαν μια εύκολη απάντηση. Απλώς χρησιμοποιείτε το CSS για να ρυθμίσετε το ύψος ενός στοιχείου στο 100%, αλλά αυτό δεν επεκτείνει πάντα αυτό το στοιχείο για να ταιριάζει σε ολόκληρο το παράθυρο του προγράμματος περιήγησης. Ας μάθουμε γιατί συμβαίνει αυτό και τι μπορείτε να κάνετε για να επιτύχετε αυτό το οπτικό στυλ.
Εικονοστοιχεία και ποσοστά
Όταν καθορίζετε το ύψος ενός στοιχείου χρησιμοποιώντας την ιδιότητα CSS και μια τιμή που χρησιμοποιεί εικονοστοιχεία, το στοιχείο αυτό θα καταλαμβάνει εκείνο τον πολύ κατακόρυφο χώρο στο πρόγραμμα περιήγησης.
Για παράδειγμα, μια παράγραφο με ύψος: 100px; θα πάρει 100 pixels του κάθετου χώρου στο design.It δεν έχει σημασία πόσο μεγαλύτερο είναι το παράθυρο του browser σας, αυτό το στοιχείο θα είναι 100 pixels σε ύψος.
Τα ποσοστά δουλεύουν διαφορετικά από τα εικονοστοιχεία. Σύμφωνα με την προδιαγραφή W3C, τα ύψη ποσοστών υπολογίζονται σε σχέση με το ύψος του δοχείου. Έτσι, αν βάλετε μια παράγραφο με ύψος: 50%; μέσα σε div με ύψος 100px, η παράγραφος θα έχει ύψος 50 pixel, δηλαδή το 50% του γονικού στοιχείου.
Γιατί αποτυγχάνουν οι εκατοστιαίες αναλογίες
Αν σχεδιάζετε μια ιστοσελίδα και έχετε μια στήλη που θέλετε να πάρετε το πλήρες ύψος του παραθύρου, η φυσική κλίση είναι να προσθέσετε ένα ύψος: 100%. σε αυτό το στοιχείο. Μετά από όλα, αν ορίζετε το πλάτος σε πλάτος: 100%; το στοιχείο θα καταλάβει ολόκληρο τον οριζόντιο χώρο της σελίδας, οπότε το ύψος θα πρέπει να λειτουργεί το ίδιο, σωστά; Δυστυχώς, αυτό δεν συμβαίνει καθόλου.
Για να κατανοήσετε γιατί συμβαίνει αυτό, πρέπει να κατανοήσετε τον τρόπο με τον οποίο τα προγράμματα περιήγησης ερμηνεύουν το ύψος και το πλάτος. Τα προγράμματα περιήγησης Web υπολογίζουν το συνολικό διαθέσιμο πλάτος ως συνάρτηση του εύρους του ανοίγματος του παραθύρου του προγράμματος περιήγησης. Αν δεν έχετε ορίσει τιμές στα πλάτη στα έγγραφά σας, το πρόγραμμα περιήγησης θα μεταφέρει αυτόματα τα περιεχόμενα για να γεμίσει ολόκληρο το πλάτος του παραθύρου (το πλάτος 100% είναι η προεπιλογή).
Η τιμή ύψους υπολογίζεται διαφορετικά από το πλάτος. Στην πραγματικότητα, τα προγράμματα περιήγησης δεν αξιολογούν το ύψος καθόλου, εκτός εάν το περιεχόμενο είναι τόσο μεγάλο χρονικό διάστημα που υπερβαίνει το παράθυρο προβολής (απαιτώντας έτσι γραμμές κύλισης) ή αν ο σχεδιαστής ιστού ορίζει ένα απόλυτο ύψος για ένα στοιχείο στη σελίδα. Διαφορετικά, το πρόγραμμα περιήγησης επιτρέπει απλώς τη ροή περιεχομένου εντός του πλάτους του παραθύρου προβολής μέχρι να φτάσει στο τέλος. Το ύψος δεν υπολογίζεται καθόλου.
Προβλήματα προκύπτουν όταν ρυθμίζετε ένα ποσοστό ύψους σε ένα στοιχείο που έχει γονικά στοιχεία χωρίς ρύθμιση ύψους - με άλλα λόγια, τα γονικά στοιχεία έχουν προεπιλεγμένο ύψος: αυτόματα. . Στην πραγματικότητα, ζητάτε από το πρόγραμμα περιήγησης να υπολογίζει ένα ύψος από μια απροσδιόριστη τιμή. Δεδομένου ότι αυτό θα ισοδυναμεί με μηδενική τιμή, το αποτέλεσμα είναι ότι το πρόγραμμα περιήγησης δεν κάνει τίποτα.
Εάν θέλετε να ορίσετε ένα ύψος στις ιστοσελίδες σας σε ένα ποσοστό, θα πρέπει να ρυθμίσετε το ύψος κάθε γονικού στοιχείου εκείνου που θέλετε το καθορισμένο ύψος. Με άλλα λόγια, αν έχετε μια σελίδα όπως αυτή:
Περιεχόμενο εδώ
Πιθανότατα θέλετε το div και την παράγραφο σε αυτό να έχουν ύψος 100%, αλλά αυτό div έχει στην πραγματικότητα δύο γονικά στοιχεία:
και. Για να ορίσετε το ύψος του div σε σχετικό ύψος, πρέπει να ρυθμίσετε το ύψος του σώματος και των στοιχείων html επίσης.
Έτσι θα χρειαστεί να χρησιμοποιήσετε το CSS για να ρυθμίσετε το ύψος όχι μόνο του div, αλλά και του body και των html στοιχείων. Αυτό μπορεί να είναι μια πρόκληση, δεδομένου ότι μπορείτε γρήγορα να κατακλυστείτε με τα πάντα που έχουν οριστεί σε ύψος 100%, μόνο για να επιτευχθεί αυτό το επιθυμητό αποτέλεσμα.
Μερικά πράγματα που πρέπει να σημειώσετε όταν εργάζεστε με ύψη 100%
Τώρα που ξέρετε πώς να ρυθμίσετε το ύψος των στοιχείων της σελίδας σας στο 100%, μπορεί να είναι συναρπαστικό να βγείτε και να το κάνετε σε όλες τις σελίδες σας, αλλά υπάρχουν μερικά πράγματα που πρέπει να γνωρίζετε:
- Τα περιθώρια και τα περιβλήματα μπορούν να προσθέσουν μια μπάρα κύλισης όπου δεν θέλετε. Ένα από τα πιο ενοχλητικά πράγματα που έχω βρεθεί με την εργασία με τα ποσοστά ύψους (και πλάτους) είναι ότι τότε η επένδυση και τα περιθώρια στα ίδια αυτά στοιχεία μπορούν να προσθέσουν γραμμές κύλισης στη σελίδα, παρόλο που όλο το περιεχόμενο εμφανίζεται χωρίς να χρειάζονται γραμμές κύλισης. Αυτό συμβαίνει επειδή το ύψος ή το πλάτος του στοιχείου είναι το πρώτο πράγμα που υπολογίζεται. Στη συνέχεια προστίθενται τα περιθώρια και τα περιθώρια. Έτσι, αν έχετε ένα στοιχείο με ύψος 100% και περιθώρια κορυφής και κάτω 10 pixel έκαστο, θα υπάρχει μια μπάρα κύλισης για τα επιπλέον 20 pixels. Να θυμάστε ότι το μοντέλο πλαισίου CSS προσθέτει περιθώριο, περιγράμματα και παραγεμίσματα στο μέγεθος ενός στοιχείου, έτσι ώστε το 100% με οποιαδήποτε από αυτές τις άλλες τιμές μοντέλου κουτιού θα είναι στην πραγματικότητα περισσότερο από 100%.
- Αν το περιεχόμενό σας υπερβαίνει το καθορισμένο ύψος, θα αντικαταστήσει οτιδήποτε μετά από αυτό. Με άλλα λόγια, εάν έχετε σχεδίαση με στήλη ύψους 80% και το περιεχόμενο που βρίσκεται μέσα σε αυτό θα ανέλθει στο 100% του ύψους, το επιπλέον 20% θα συνεχίσει κάτω από τη στήλη και θα σπάσει το σχέδιο της σελίδας σας. Εάν υπάρχει περιεχόμενο κάτω από τη στήλη αυτή, το κείμενο απλά θα γράφει πάνω από την κορυφή. Συχνά βλέπω αυτό να συμβαίνει όταν ένας σχεδιαστής ιστοσελίδων προσπαθεί να εξαναγκάσει το ύψος μιας σελίδας και το κάνει να λειτουργεί τέλεια για την εκτόξευση, αλλά όταν το περιεχόμενο σε αυτή τη σελίδα αλλάζει στο μέλλον, τα απόλυτα ύψη τους σπάνε συνολικά τη ροή της σελίδας. Αυτό ισχύει διπλά όταν δημιουργείτε ιστοσελίδες με δυνατότητα απόκρισης των οποίων το πλάτος και το ύψος πρέπει να αλλάζουν με το μέγεθος του παραθύρου προβολής.
Για να διορθώσετε αυτό, μπορείτε επίσης να ορίσετε το ύψος του στοιχείου. Εάν το ορίσετε αυτόματα, θα εμφανιστούν γραμμές κύλισης εάν είναι απαραίτητες αλλά εξαφανίζονται όταν δεν είναι. Αυτό διορθώνει το οπτικό σπάσιμο, αλλά προσθέτει κύλινδροι κύλισης όπου μπορεί να μην θέλετε.
Χρησιμοποιώντας μονάδες Viewport
Ένας άλλος τρόπος που μπορείτε να αντιμετωπίσετε αυτή την πρόκληση είναι να πειραματιστείτε με μονάδες προβολής CSS. Χρησιμοποιώντας τη μονάδα μέτρησης ύψους προβολής , μπορείτε να διαστασιοποιήσετε τα στοιχεία για να αποκτήσετε ένα καθορισμένο ύψος του παραθύρου προβολής και αυτό θα αλλάξει καθώς αλλάζει το παράθυρο προβολής! Αυτός είναι ένας πολύ καλός τρόπος να αποκτήσετε τα γραφικά σας ύψους 100% σε μια σελίδα, αλλά να τα έχετε ακόμα ευέλικτα για διαφορετικές συσκευές και μεγέθη οθόνης.