საყოველთაოდ სვამენ კითხვას ვებ-დიზაინში "არის თუ არა ელემენტის სიმაღლე 100% -მდე?"
ეს შეიძლება, როგორც ჩანს ადვილი პასუხი. უბრალოდ გამოიყენე CSS , ელემენტის სიმაღლე 100% -მდე, მაგრამ ეს ყოველთვის არ არის გაჭიმული, რომ ელემენტს შეესაბამება მთელი ბრაუზერის ფანჯარა. გავიგოთ, რატომ ხდება ეს და რა უნდა გააკეთოთ ამ ვიზუალური სტილის მისაღწევად.
Pixels და პროცენტული
ელემენტის სიმაღლის განსაზღვრა CSS- ის გამოყენებით და ღირებულება, რომელიც იყენებს პიქსელებს, ეს ელემენტი ბრაუზერში ბევრად ვერტიკალურ სივრცეს აიღებს.
მაგალითად, პუნქტის სიმაღლე: 100px; თქვენს დიზაინში ვერტიკალური სივრცის 100 პიქსელი დასჭირდება. არ აქვს მნიშვნელობა, თუ რამდენად დიდია თქვენი ბრაუზერის ფანჯარა, ეს ელემენტი იქნება 100 პიქსელი სიმაღლე.
პროცენტული განსხვავებებია ვიდრე პიქსელზე. W3C- ის დაზუსტების მიხედვით, პროცენტული სიმაღლეები გამოითვლება კონტეინერის სიმაღლეზე. ასე რომ, თუ თქვენ დააყენა აბზაცი სიმაღლე: 50%; შიგნით div-ის სიმაღლე 100px, პუნქტი იქნება 50 პიქსელი სიმაღლე, რაც 50% მისი მშობელი ელემენტს.
რატომ პროცენტული Heights ვერ
თუ თქვენ შექმნით ვებ-გვერდს და სვეტი გაქვთ, რომ ფანჯრის სრული სიმაღლე გავაგრძელოთ, ბუნებრივი მიდრეკილება არის სიმაღლის დამატება: 100%; ამ ელემენტს. ყოველივე ამის შემდეგ, თუ სიგანის სიგანის სიგანე: 100%; ელემენტს მიიღებს გვერდის სრული ჰორიზონტალური სივრცე, ასე რომ სიმაღლე უნდა იმუშაოს იგივე, არა? სამწუხაროდ, ეს ასე არ არის.
იმის გაგება, თუ რატომ მოხდება ეს, უნდა გესმოდეს, თუ როგორ ბრაუზერები ინტერპრეტაცია სიმაღლე და სიგანე. ბრაუზერის ფანჯარა გახსნილია ვებ-ბრაუზერების საერთო სიგანეზე, როგორც ფუნქციონირების ფუნქცია. თუ თქვენს მიერ არჩეული სიგანე ღირებულებები არ არის მითითებული, ბრაუზერი ავტომატურად ახდენს შინაარსი ფანჯრის მთლიანი სიგანეს შევსებას (100% სიგანე არის ნაგულისხმევი).
სიმაღლის ღირებულება გამოითვლება განსხვავებულად ვიდრე სიგანე. სინამდვილეში, ბრაუზერები არ აფასებენ სიმაღლეს ყველა იმ შემთხვევაში, თუ შინაარსი დიდი ხანია, რომ იგი გადის გარეთ (ამდენად მოითხოვს გადახვევა ბარები) ან თუ დიზაინერი აბსოლუტური სიმაღლე ელემენტს გვერდზე. წინააღმდეგ შემთხვევაში, ბრაუზერი უბრალოდ საშუალებას აძლევს კონტენტის სიგანეში, ვიდრე ბოლომდე მიდის. სიმაღლე არ არის რეალურად გათვლილი.
პრობლემები, როდესაც თქვენ მითითებული პროცენტული სიმაღლე ელემენტს, რომელსაც აქვს მშობელი ელემენტების გარეშე სიმაღლეები კომპლექტი - სხვა სიტყვებით, მშობელი ელემენტები აქვს სიმაღლე: ავტო; . თქვენ ხართ, ფაქტობრივად, სთხოვეთ ბრაუზერს გამოთვალოთ სიმაღლე განუსაზღვრელი მნიშვნელობისაგან. მას შემდეგ, რაც ეს იქნებოდა null ღირებულება, შედეგი არის ის, რომ ბრაუზერი არაფერი.
თუ გსურთ დააყენოთ სიმაღლე თქვენს ვებ გვერდებზე პროცენტში, თქვენ უნდა დააყენოთ სიმაღლე თითოეული მშობელი ელემენტის ერთი გსურთ სიმაღლე განსაზღვრული. სხვა სიტყვებით, თუ გაქვთ გვერდი მსგავსი:
შინაარსი აქ
თქვენ სავარაუდოდ გვინდა div და პუნქტი მას აქვს 100% სიმაღლე, მაგრამ რომ div ფაქტობრივად ორი მშობელი ელემენტები:
და. ნათურის სიმაღლის განსაზღვრის მიზნით ნათესავი სიმაღლე, თქვენ უნდა დააყენოთ სიმაღლე სხეულის და html ელემენტები.
ასე რომ თქვენ უნდა გამოიყენოთ CSS შექმნას სიმაღლე არა მხოლოდ div, არამედ სხეულის და html ელემენტები. ეს შეიძლება იყოს გამოწვევა, რადგან თქვენ შეგიძლიათ სწრაფად გადააჭარბოთ ყველაფერს, რომ 100% სიმაღლეზე დააყენოთ მხოლოდ ამ სასურველი ეფექტის მიღწევა.
ზოგიერთი რამ შევახსენო, როდესაც მუშაობის 100% Heights
ახლა, როდესაც იცით, თუ როგორ უნდა დააყენოთ თქვენი გვერდი ელემენტების სიმაღლე 100%, ეს შეიძლება იყოს საინტერესო გასვლა და ამის გაკეთება ყველა თქვენს გვერდს, მაგრამ არსებობს რამდენიმე რამ, რაც უნდა იცოდეს:
- მარჟები და padding შეგიძლიათ დაამატოთ გადახვევა ბარი, სადაც არ გსურთ ერთი. ერთი ყველაზე შემაშფოთებელი რამ, რაც მე ვიპოვე პროცენტული სიმაღლეებით (და სიგანეები), ის არის, რომ მაშინ იმავე ელემენტებზე padding და margins შეგიძლიათ დაამატოთ გადახვევის ბარები გვერდზე, მიუხედავად იმისა, რომ ყველა შინაარსი აჩვენებს გარეშე საჭირო სენსორული ბარები. ეს იმიტომ, რომ ელემენტის სიმაღლე ან სიგანე არის პირველი, რაც გამოითვლება. შემდეგ ზღვარი და paddings ემატება. ასე რომ, თუ თქვენ გაქვთ ელემენტის სიმაღლე 100% და ზედა და ქვედა ზღვარი 10 pixels თითოეული, იქნება scroll ბარი დამატებითი 20 პიქსელი. გახსოვდეთ, რომ CSS- ის მოდელს ემატება ზღვარი, საზღვარი და პანდირება ელემენტის ზომაზე, ასე რომ 100% -იანი რომელიმე სხვა ყუთში მოდელის ღირებულებები 100% -ზე მეტი იქნება.
- თუ თქვენი კონტენტი უფრო მეტია, ვიდრე განსაზღვრული სიმაღლე, იგი მას შემდეგ გადაწერს მას. სხვა სიტყვებით რომ ვთქვათ, თუ თქვენ გაქვთ დიზაინის სვეტი, რომელიც 80% სიმაღლეა და მასში არსებული შინაარსი აიღებს 100% სიმაღლეს, დამატებით 20% გაგრძელდება სვეტის ქვემოთ და ვიზუალური დიზაინის შესვენება თქვენი გვერდი. თუ არსებობს შინაარსი ქვემოთ რომ სვეტი, ტექსტი უბრალოდ ჩაწერეთ ზემოთ. მე ხშირად ვხედავ, როცა ვებ დიზაინერი ცდილობს აიძულოს გვერდის სიმაღლე და დაიწყოს მუშაობა სრულიად დაწყებისათვის, მაგრამ როდესაც შინაარსი ამ გვერდზე შეიცვლება მომავალში, მათი აბსოლუტური სიმაღლეები მთლიანად დაარღვიოს გვერდი. ეს არის ორმაგი ჭეშმარიტი როდესაც თქვენ აშენებთ საპასუხო საიტები, რომლის სიგანე და სიმაღლე უნდა შეიცვალოს ზომის viewport.
დაფიქსირება ამ, შეგიძლიათ დააყენოთ სიმაღლე ელემენტს ასევე. თუ მას ავტომატურად ვაყენებთ, გრაგნილი ბარები გამოჩნდება, თუ საჭიროა, მაგრამ გაქრება, როდესაც ისინი არ არიან. რომ აფიქსირებს ვიზუალური შესვენების, მაგრამ დასძენს scrollbars სადაც არ შეიძლება მათ სურთ.
Viewport ერთეულების გამოყენება
კიდევ ერთი გზა შეგიძლიათ გაუმკლავდეთ ამ გამოწვევას არის ექსპერიმენტი CSS Viewport ერთეულები. გაზომვის სიგრძის ერთეულის გამოყენებით, შეგიძლიათ ზომის ელემენტები ნახტომის განსაზღვრული სიმაღლის დასამყარებლად და ეს ცვლილებები შეიცვლება როგორც ცვლილებების სახით! ეს არის დიდი გზა თქვენი 100% სიმაღლე ვიზუალური გვერდზე, მაგრამ მაინც მათ მოქნილი სხვადასხვა მოწყობილობები და ეკრანზე ზომის.