Τι σημαίνει 100vh;

Τι σημαίνει 100vh;
Τι σημαίνει 100vh;
Anonim

Το

CSS3 μας δίνει μονάδες σχετικές με το viewport. 100vw σημαίνει το 100% του πλάτους της θύρας προβολής. 100vh; 100% του ύψους.

Είναι τα 100vh ίδια με το 100%;

Για παράδειγμα, οι μονάδες θυρών προβολής μπορεί να είναι χρήσιμες όταν προσπαθείτε να δημιουργήσετε μια στοίβα στοιχείων ίσου ύψους/πλάτους. … Αντίθετα, το ύψος: 100vh θα είναι το 100% του ύψους της θύρας προβολής ανεξάρτητα από το πού βρίσκεται το στοιχείο στο DOM.

Τι σημαίνει VH στο CSS;

vh & vw. Το vh σημαίνει ύψος θύρας προβολής και το vw είναι το πλάτος της θύρας προβολής. Επομένως, η ρύθμιση ενός στοιχείου σε τιμή πλάτους 50vw σημαίνει ότι το στοιχείο θα έχει πλάτος που αντιστοιχεί στο 50% του μεγέθους της θύρας προβολής και αυτό παραμένει αληθές όταν αλλάζει το μέγεθος της θύρας προβολής.

Πώς μπορώ να αλλάξω το ύψος μου σε 100vh;

ύψος: 100vh; σημαίνει ότι το ύψος αυτού του στοιχείου είναι ίσο με το 100% του ύψους της θύρας προβολής. παράδειγμα: ύψος: 50vh; Εάν το ύψος της οθόνης σας είναι 1000 px, το ύψος του στοιχείου σας θα είναι ίσο με 500 px (50% των 1000 px). ύψος: υπολογισμός (100% - 100 px); θα υπολογίσει το μέγεθος του στοιχείου χρησιμοποιώντας την τιμή του στοιχείου.

Γιατί δεν λειτουργεί το ύψος 100%;

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

Συνιστάται: