א קאַמאַנלי געבעטן קשיא אין וועבזייַטל פּלאַן איז "ווי טאָן איר שטעלן די הייך פון אַן עלעמענט צו 100%"?
דעם קען ויסקומען ווי אַ גרינג ענטפער. איר פשוט ניצן CSS צו שטעלן די הייך פון אַן עלעמענט צו 100%, אָבער דאָס טוט נישט שטענדיק אויסשטרעקן דעם עלעמענט צו פּאַסיק די גאנצע בלעטערער פֿענצטער. זאל ס געפינען אויס וואָס דעם כאַפּאַנז און וואָס איר קענען טאָן צו דערגרייכן דעם וויזשאַוואַל סטיל.
פּיקסעלס און פּערסענטידזשיז
ווען איר באַשליסן די הייך פון אַן עלעמענט ניצן די קסס פאַרמאָג און אַ ווערט וואָס ניצט בילדצעלן, אַז עלעמענט וועט נעמען אַרויף אַז פיל ווערטיקאַל פּלאַץ אין דעם בלעטערער.
פֿאַר בייַשפּיל, אַ פּאַראַגראַף מיט אַ הייך: 100 פּקס; וועט נעמען אַרויף 100 פּיקסעלס פון ווערטיקאַל פּלאַץ אין דיין design.It טוט ניט ענין ווי גרעסערע דיין בלעטערער פֿענצטער איז, דעם עלעמענט וועט זיין 100 פּיקסעלס אין הייך.
פּראָצענט אַרבעטן אַנדערש ווי פּיקסעלס. לויט די W3C באַשרייַבונג, פּראָצענט כייץ זענען קאַלקיאַלייטיד מיט רעספּעקט צו די קאַנטיינער ס הייך. אַזוי אויב איר שטעלן אַ פּאַראַגראַף מיט אַ הייך: 50%; ין אַ דוו מיט אַ הייך פון 100 פּקס, די פּאַראַגראַף וועט זיין 50 בילדצעלן אין הייך, וואָס איז 50% פון עס ס פאָטער עלעמענט.
פארוואס פּראָצענט כייץ פייל
אויב איר'רע דיזיינינג אַ וועבפּאַגע, און איר האָבן אַ זייַל אַז איר וואָלט ווי צו נעמען די פול הייך פון די פֿענצטער, די נאַטירלעך יצר איז צו לייגן אַ הייך: 100%; צו אַז עלעמענט. נאָך אַלע, אויב איר שטעלן די ברייט צו ברייט: 100%; דער עלעמענט וועט נעמען אַרויף די פול האָריזאָנטאַל אָרט פון די בלאַט, אַזוי הייך זאָל אַרבעט די זעלבע, רעכט? צום באַדויערן, דאָס איז נישט דער פאַל בייַ אַלע.
צו פֿאַרשטיין וואָס דאָס כאַפּאַנז, איר מוזן פֿאַרשטיין ווי בראַוזערז טייַטשן הייך און ברייט. וועב בראַוזערז רעכענען די גאַנץ פאַראַנען ברייט ווי אַ פֿונקציע פון ווי ברייט דער בלעטערער פֿענצטער איז געעפנט. אויב איר טאָן ניט שטעלן קיין ברייט וואַלועס אויף דיין דאקומענטן, דער בלעטערער וועט אויטאָמאַטיש לויפן די אינהאַלט צו פּלאָמבירן די גאנצע ברייט פון די פֿענצטער (100% ברייט איז די פעליקייַט).
הייך ווערט קאַלקיאַלייטיד אַנדערש ווי ברייט. אין פאַקט, בראַוזערז טאָן ניט אָפּשאַצן די הייך בייַ אַלע אויב דער אינהאַלט איז אַזוי לאַנג אַז עס גייט אַרויס פון די Viewport (אַזוי ריקווייערז מעגילע באַרס) אָדער אויב די וועב דיזיינער שטעלט אַן אַבסאָלוטע הייך פֿאַר אַן עלעמענט אויף דעם בלאַט. אַנדערש, דער בלעטערער פשוט לאָזן די צופרידן לויפן אין די ברייט פון די Viewport ביז עס קומט צו דער סוף. די הייך איז נישט אַקשלי קאַלקיאַלייטיד בייַ אַלע.
פּראָבלעמס פאַלן ווען איר שטעלן אַ פּראָצענט הייך אויף אַן עלעמענט וואָס האט עלטערן עלעמענטן אָן כייץ שטעלן - אין אנדערע ווערטער, די עלטערן עלעמענטן האָבן אַ פעליקייַט הייך: אַוטאָ; . איר זענט, אין פאַקט, אַסקינג דעם בלעטערער צו רעכענען אַ הייך פון אַ ומענדיקייַט ווערט. זינט וואָס וואָלט גלייַך אַ נאַל-ווערט, דער רעזולטאַט איז אַז דער בלעטערער טוט גאָרנישט.
אויב איר ווילן צו שטעלן אַ הייך אויף דיין וועב זייַטלעך צו אַ פּראָצענט, איר האָבן צו שטעלן די הייך פון יעדער פאָטער עלעמענט פון די איין איר ווילן די הייך דיפיינד. אין אנדערע ווערטער, אויב איר האָט אַ בלאַט ווי דאָס:
אינהאַלט דאָ
איר מסתּמא ווילן די דיוו און דער פּאַראַגראַף אין עס צו האָבן אַ 100% הייך, אָבער אַז דיווי אַקשלי האט צוויי עלטערן עלעמענטן:
און. צו באַשטימען די הייך פון די דיוו צו אַ קאָרעוו הייך, איר מוזן שטעלן די הייך פון די גוף און HTML עלעמענטן ווי געזונט.
אַזוי איר דאַרפֿן צו נוצן CSS צו שטעלן די הייך פון ניט בלויז די דיוו, אָבער אויך די גוף און HTML עלעמענטן. דאס קען זיין אַ אַרויסרופן ווייַל איר קענען געשווינד באַקומען אָוווערכוועלמד מיט אַלץ וואָס איז באַשטימט צו 100% הייך, נאָר צו דערגרייכן דעם געוואלט ווירקונג.
עטלעכע זאכן צו טאָן ווען ארבעטן מיט 100% כייץ
איצט אַז איר וויסן ווי צו שטעלן די הייך פון דיין בלאַט עלעמענטן צו 100%, עס קענען זיין יקסייטינג צו גיין אויס און טאָן אַז צו אַלע דיין בלעטער, אָבער עס זענען אַ ביסל זאכן איר זאָל זיין אַווער פון:
- מאַראַנץ און וואַטן קענען לייגן אַ מעגילע באַר ווו איר טאָן ניט וועלן איינער. איינער פון די מערסט אַנויינג זאכן איך האָבן געפונען מיט ארבעטן מיט פּראָצענט כייץ (און ווידטס) איז אַז דעמאָלט די וואַטן און מאַרדזשאַנז אויף די זעלבע יסודות קענען לייגן מעגילע באַרס צו די בלאַט, כאָטש אַלע די צופרידן דיספּלייז אָן נידינג מעגילע באַרס. דעם איז ווייַל די הייך אָדער ברייט פון די עלעמענט איז דער ערשטער זאַך וואָס איז קאַלקיאַלייטאַד. דעריבער די מאַרדזשאַנז און פּאַדינגז זענען צוגעגעבן. אַזוי אויב איר האָבן אַן עלעמענט מיט אַ הייך פון 100% און שפּיץ און דנאָ מאַרדזשאַנז פון 10 פּיקסעלס יעדער, עס וועט זיין אַ מעגילע באַר פֿאַר די עקסטרע 20 פּיקסעלס. געדענקט די CSS קעסטל מאָדעל מוסיף גרענעץ, גרענעץ, און פּלאַדינג אַנטו די גרייס פון אַן עלעמענט, אַזוי 100% מיט קיין פון די אנדערע קעסטל מאָדעל וואַלועס וועט פאקטיש זייַן מער ווי 100%.
- אויב דיין אינהאַלט נעמט מער ווי די דיפיינד הייך, עס וועט אָווועררייט עפּעס נאָך עס. אין אנדערע ווערטער, אויב איר האָבן אַ פּלאַן מיט אַ זייַל וואָס איז 80% אין הייך, און דער אינהאַלט וואָס איז ין עס וועט נעמען אַרויף 100% פון די הייך, אַז עקסטרע 20% וועט פאָרזעצן אונטער די זייַל און ברעכן די וויזשאַוואַל פּלאַן פון דיין בלאַט. אויב עס איז אינהאַלט אונטן אַז זייַל, דער טעקסט וועט פשוט שרייַבן איבער די שפּיץ פון עס. איך אָפט זען דעם פּאַסירן ווען אַ וועב דיזיינער פרוווט צו קראַפט די הייך פון אַ בלאַט און עס אַרבעט עס בישליימעס פֿאַר קאַטער, אָבער ווען אינהאַלט אויף דעם בלאַט ענדערונגען אין דער צוקונפֿט, זייער אַבסאָלוט כייץ גאַנץ ברעכן די לויפן פון די בלאַט. דעם איז דאַבלי אמת ווען איר זענען בנין אָפּרופיק וועבסיטעס וועמענס ברייט און הייך מוזן טוישן מיט די גרייס פון דעם Viewport.
צו פאַרריכטן דעם, איר קענען שטעלן די הייך פון די עלעמענט ווי געזונט. אויב איר שטעלן עס צו אַוטאָ, מעגילע באַרס וועט דערשייַנען אויב זיי זענען דארף אָבער פאַרשווינדן ווען זיי זענען נישט. אַז פיקסיז די וויזשאַוואַל ברעכן, אָבער עס מוסיף סקראָללבאַרס ווו איר קען נישט וועלן זיי.
ניצן Viewport וניץ
אן אנדער וועג איר קענען צו באַפאַלן דעם אַרויסרופן איז צו עקספּערימענט מיט CSS Viewport Units. דורך די מיינונג מעזשער פון די מיינונג מעזשערמאַנט, איר קענען גרייס עלעמענטן צו נעמען אַרויף אַ דיפיינד הייך פון די Viewport, און אַז וועט ענדערן ווי די Viewport ענדערונגען! דעם איז אַ גרויס וועג צו באַקומען דיין 100% הייך וויזשאַוואַלז אויף אַ בלאַט, אָבער נאָך האָבן זיי זיין פלעקסאַבאַל פֿאַר פאַרשידענע דעוויסעס און פאַרשטעלן סיזעס.