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