როგორ დააყენოთ ქვედა კოლონტიტული ბრაუზერის ფანჯრის ბოლოში CSS– ის გამოყენებით. როგორ სწორად ჩავსვათ მცურავი ქვედა კოლონტიტული გვერდის ბოლოში რას წარმოადგენს ამ ქვედა კოლონტიტულის ტეგი

გადავიდეთ სამუშაო მაგალითზე

რასაც ჩვენ ვხედავთ განლაგების ნაკლოვანებები ფრჩხილების ქვედა კოლონტიტულის ეფექტის განხორციელების თვალსაზრისით? ჩვენ ამას ვხედავთ
1) ქვედა კოლონტიტული საიტზე არის ბლოკი id \u003d განლაგებით, რომელსაც არ აქვს პროცენტული სიმაღლე. თეორიულად, მან, მშობლებმა და შინაარსის მარცხენა ბლოკმა 100% სიმაღლეზე უნდა დააყენონ. ამ უკანასკნელს პრობლემები აქვს - ეს არ არის შესაფერისი. შესაბამისად, ერთი შრეების ბლოკი არ არის დაკარგული ან ქვედა კოლონტიტული არასწორ დონეზეა. გარდა ამისა,
2) ქვედა კოლონტიტულის სიმაღლე ცვალებადია (ეს დამოკიდებულია სიაში ელემენტების რაოდენობაზე და შრიფტის ზომაზე, ეს ჩანს არა HTML– დან, არამედ CSS– დან). და
3) დასრულდა # განლაგება არსებობს რეკლამის განყოფილება, რომლის ფიქსირებული სიმაღლეა 90 პიქსელი;
4) ქვედა კოლონტიტონში ან (ზოგადად საუბრისას) ყუთში არ არის გასწორების ყუთები # განლაგება (დიახ, მაგრამ ბლოკის ზემოთ .გააქტიურებული_პოსტები; ამასთან, ალბათ იგი უნდა მიეკუთვნოს ქვედა კოლონტიტულს).

წერტილი 4 - თქვენ უნდა დახაზოთ სკრიპტით.
მესამე ეტაპის გარკვევა მარტივად გამოიყურება # განლაგების დამატებით (margin-top: -90px;) მაგრამ გახსოვდეთ, რომ ეს ბლოკი შეიძლება არ არსებობდეს - იგი ჩახშობილია ბანერის საჭრელით, ან რეკლამის განმთავსებლები მოულოდნელად გადაწყვეტენ არ აჩვენონ იგი. საიტზე უამრავი გვერდია, სადაც ეს არ არის. ამიტომ დამოკიდებულება ზღვარი-ზედა რეკლამის განყოფილებიდან ცუდი იდეაა. ბევრად უკეთესია მისი შიგნით განთავსება # განლაგება - მაშინ ის არაფერში ჩაერევა.

პირველი პუნქტი - იმისათვის, რომ ფრჩხილების ქვედა კოლონტიტული საერთოდ იმუშაოს, თქვენ ქვედა ფსკერის ბლოკი უნდა მოათავსოთ # განლაგება... ამასთან, ჯავასკრიპტის დახმარებით შეგიძლიათ განახორციელოთ ფრჩხილის ქვედა კოლონტიტულის სხვა სქემები, მაგრამ ნებისმიერ შემთხვევაში გჭირდებათ JS ან თავდაპირველი სწორი განლაგება ამის გარეშე.

ვინაიდან ჩვენ არ შეგვიძლია ვიყოთ უფრო ძლიერი ვიდრე საიტის ბოლო დიზაინერი, ვინც "ჩასვა" ქვედა კოლონტიტულის შინაარსის შიგნით, ჩვენ გადავდებთ ქვედა გვერდის სწორად განთავსების იდეას ჩვენს მომავალ საიტზე (რაც, შესაბამისად, "უფრო მაგარი" იქნება Habr!) აცხადებს. (მოდით, ახლავე ვთქვათ, რომ ეს არ არის განლაგების დიზაინერის ან გადართვის დამნაშავე, მაგრამ რა თქმა უნდა, საიტის ტიპი განსაზღვრავს პროექტის მენეჯმენტის სტრატეგიულ გადაწყვეტილებას.) ამით ჩვენ ვერ მივაღწევთ იდეალურს, რადგან ჩატვირთვის პროცესში პირველ ან მეორე წამში გვერდი არასწორი განლაგებით იქნება მაგრამ ჩვენთვის მნიშვნელოვანია კონცეფცია და IT სამყაროს ყველაზე პოპულარულ საიტზე გადალახვის შესაძლებლობა.

ამიტომ, სკრიპტის სწორ ადგილას (ადრე, გვერდის დატვირთვის ბოლოს), ჩვენ დავწერთ DOM რეკლამისა და ქვედა კოლოფის ბლოკების გადატანას საჭირო ადგილებში. (მოვემზადოთ იმისთვის, რომ მომხმარებლის სკრიპტების გამო, გამოსავალი უფრო რთული იქნება, ვიდრე სუფთა.)
var dQ \u003d ფუნქცია (q) (დაბრუნების document.querySelector (q);) // სტენოგრამისთვის var topL \u003d dQ ("# topline"), lay \u003d dQ ("# layout"), foot \u003d dQ ("# footer") ) if (topL && lay) // ბანერი - შინაარსის ბლოკის შიგნით lay.insertBefore (topL, lay.firstChild); if (lay && foot && lay.nextSibling) // ქვედა კოლონტიტული lay.parentNode.insertBefore (ქვედა კოლონტიტული, lay.nextSibling);
ჩვენ ბლოკებს ვაყენებთ მათ ადგილებზე - ახლა რჩება ელემენტების საჭირო თვისებების მინიჭება. ქვედა კოლონტიტულის სიმაღლე ზუსტად უნდა განისაზღვროს, უბრალოდ იმიტომ, რომ ეს უკვე ვიცით მომხმარებლის სკრიპტის მოქმედების მომენტამდე (გვერდის დატვირთვის ბოლოს). როგორც ზემოთ აღვნიშნეთ, მომხმარებლის სკრიპტის ტრიგერის წერტილის გამო, გარდაუვალია გვერდზე ქვედა კოლონტიტულის ჩვენება. შეგიძლიათ სცადოთ "კარგი სახის" გაკეთება, მაგრამ "ცუდი თამაშით"? Რისთვის? საიტის "ცუდი თამაში" საშუალებას გაძლევთ გააკეთოთ კონცეფცია სუპერ ძალისხმევის გარეშე, რაც საკმარისი იქნება ხარისხის შესაფასებლად და საჭირო არ იქნება, თუ თქვენს პროექტზე "სწორად ითამაშებთ".
if (ფეხი) (// block aligner

ქვედა კოლონტიტულში h.apnd_el ((clss: "გასაგები", დამატება to: ქვედა კოლონტიტული)); var footH \u003d foot.offsetHeight; // ... და გავზომოთ ქვედა კოლონტიტულის სიმაღლე) თუ (topL && lay && footer && lay.nextSibling) (// სასურველი სიმაღლის ბლოკის გასწორება შინაარსში ("განლაგება") h.apnd_el ((clss: "წმინდა", css :( სიმაღლე: (footH || 0) + "px"), დამატება to: lay)); lay.style.minHeight \u003d "100%"; h.addRules ("# layout (margin-bottom: -" + footH + "px ! მნიშვნელოვანია) html, body (სიმაღლე: 100%) ");)
აქ მივცეთ უფლება თვითონ დაწერილი ფუნქციის გამოყენებას თ .apnd_elრაც იგივე რამ გააკეთა რაც jQuery– ში -
$("") .css ((სიმაღლე: footH || 0)). appendTo ($ (ქვედა კოლონტიტული))
შემდეგ არის კიდევ ერთი ტიპიური CSS წესების ინექციის ფუნქცია - h.addRules... აქ თქვენ ამის გაკეთება არ შეგიძლიათ, რადგან თქვენ უნდა გამოაცხადოთ წესი " ! მნიშვნელოვანი"- მხოლოდ მომხმარებლის პრიორიტეტების თავისებურებების გამო მომხმარებლის სკრიპტიდან.

ამ კოდების საშუალებით, ჩვენ შეგვიძლია დავათვალიეროთ ფრჩხილის ქვედა კოლონტიტულის მომხმარებლის სკრიპტში (მას შემდეგ გადმოვხტეთ) და კარგად გვესმოდეს, თუ როგორ უნდა ავაშენოთ გვერდის განლაგება. იმედგაცრუებაა ყოველდღიურად მოფუსფუსე დიზაინის გამოყენება, ამიტომ რეკომენდებულია ამის გაკეთება მხოლოდ დემონსტრირებისა და ტესტირებისთვის. HabrAjax მომხმარებლის სკრიპტში, მე დავაინსტალირე მსგავსი სკრიპტი, რომელიც დავხურე "underFooter" - ის პარამეტრით (მონიშნეთ ველში პარამეტრების ჩამონათვალში "ქვედა ქვედა კოლონტიტულზე"), დაწყებული 0.883_2012-09-12 ვერსიიდან.

გავლენას ახდენს ლურსმანი ქვედა კოლონტიტული ZenComment სტილის განახლების საჭიროებაზე? Დიახ, ეს ასეა. სტილის პრიორიტეტების რთული ჯაჭვის გამო, რომლებშიც მომხმარებლის სკრიპტის მიერ ჩასმულ სტილებს ყველაზე დაბალი პრიორიტეტი აქვთ, მე მომიწია ოდნავ მოერგო მომხმარებლის სტილები შესაძლებლობები მუშაობა ფრჩხილის ქვედა კოლონტიტულით. თუ არ განაახლეთ გამოყენების სტილები (2.66_2012-09-12 მდე +), ქვედა კოლონტიტული ზუსტად არ იმუშავებს.

ბლოკი შემობრუნდა_პოსტი (წარსულის სამი პოპულარული პოსტი) ქვედა ლოგინში უფრო ლოგიკურად გამოიყურება, ასე რომ, რეალურ სკრიპტში ის ასევე გადადის ქვედა კოლონტიტულში.

მეორე პუნქტი (განლაგების არასრულყოფილების სიიდან) არის მხოლოდ ჰაბრის მსჯელობა (ისინი არ ვრცელდება მომხმარებლის სკრიპტზე და ნაწილობრივ იმეორებენ წინა).

გვერდებს აქვთ პრობლემა, ხელი შეუშალონ მათ, გააკეთონ ფრჩხილის ქვედა კოლონტიტული CSS– ში - განუსაზღვრელი ქვედა კოლონტიტულის სიმაღლე, ბრაუზერის ნაგულისხმევი შრიფტის მიხედვით. ქვედა კოლონტიტულში CSS– ში ჩასატარებლად უნდა აირჩიოთ შრიფტების ფარდობითი სიმაღლე, მაგრამ შესაძლოა ისინი არ იმუშაონ, თუ მოცემული შრიფტები არ არის ხელმისაწვდომი მომხმარებლის კომპიუტერზე. ამიტომ, გამოსავალი უნდა შეიცავდეს JavaScript- ს, რომელიც შეიძლება შეესაბამებოდეს ქვედა კოლონტიტულის მიახლოებით მდებარეობას ზუსტად ერთზე გადასვლებით. ან, სხვადასხვა პლატფორმაზე მომხმარებლის სკრიპტში გაკეთებული ამოხსნის მისაღებობის შესწავლის შემდეგ, გააკეთეთ ფრჩხილების ქვედა კოლონტიტულის გამოთვლილი პარამეტრი - პირველი დაკვირვების შედეგად ჩანს, რომ გამოსავალი პრაქტიკულია.

დასკვნა: შესაძლებელია განლაგების სრულად მოწყობა Habré- ზე, მაგრამ ამისათვის გჭირდებათ განლაგების დიზაინერი, რომელიც ნათლად აცნობიერებს განლაგების ქცევას და ბლოკებს ათავსებს სწორი თანმიმდევრობით. (ახლა ქვედა კოლონტიტული და ზედა ბანერი არ არის "იქ" და არა ისე, რომ მხოლოდ სტილი მიიღოთ ფრჩხილის ქვედა კოლონტიტული.) JS– ს გარეშე შეგიძლიათ გააკეთოთ, თუ ქვედა კოლონტიტულის სიმაღლეს დააყენებთ ფარდობით ერთეულებში, შრიფტის გაურკვევლობის გარკვეულ ზღვარს მიიღებთ.

განხორციელება

თუ ჩართავთ HabrAjax 0.883+ - ს, ჩვენ ვხედავთ "ფრჩხილის ქვედა კოლონტიტულს". იგი ადაპტირდება სიმაღლეზე სკრიპტების გამოყენებით. ეს საშუალებას გაძლევთ შეაფასოთ რამდენად უკეთ გამოიყურება გვერდები, რომლებიც ფრჩხილების ქვედა კოლონტიტულს აქვს, ჩვეულებრივთან შედარებით. ZenComment– ის უახლესი სტილები თავსებადია სკრიპტებთან, მაგრამ იმისთვის, რომ ფრჩხილების ქვედა კოლონტიტული სწორად იმუშაოს, მათთან ერთად გჭირდებათ დაინსტალირება ZenComment 2.66_2012-09-12 + ვერსია

განხორციელების ქცევის ფაქტები

შამანიზმი ქვედა კოლონით, სტილითა და სკრიპტებით არის შამანიზმი (მხოლოდ თეორიას ემყარება). ქცევა ოდნავ განსხვავებულია სხვადასხვა ბრაუზერში, მაგრამ ზოგან მოულოდნელია. მომხმარებლის სკრიპტების და დაბლოკვის გადაწყობის გარეშე, შედეგები განსხვავებული იქნება. ეს მისცა მომხმარებლის სკრიპტში განხორციელების ექსპერიმენტებმა.

1) Firefox - ქვედა კოლონტიტული ნახტომის მოულოდნელი ნაკლებობა. უცნაურია, რომ ისინი იქ არ არიან - გაწევა ხდება ქვედა კოლონტიტულის ქვედა ნაწილში განთავსების შემდეგ.

2) Chrome - ეს გამაკვირვა "მოხეტიალე გადახვევით" - ბოლოში ცარიელი ადგილები ემატება გვერდს წამში ერთხელ - სიმაღლეების გაანგარიშებისას რაღაც არასწორი ხდება. იგი მკურნალობს ustyle- ში html, body (სიმაღლე: 100%) დანიშვნის გზით, მაგრამ გარანტიების გარეშე, რომ ის ყოველთვის იმუშავებს. უფრო უსაფრთხოა შეამოწმოთ, დოკუმენტი არ აღემატება თუ არა ფანჯრის სიმაღლეს და თუ არა, მაშინ გადაადგილეთ ქვედა კოლონტიტული, წინააღმდეგ შემთხვევაში არაფერი. ნახტომით - ყველაფერი რიგზეა, ასეა.

3) ოპერა - ნახტომი არ არის (v. 12.02) პირველი გვერდის დატვირთვისას, მაგრამ ნაჩქარევმა გადატვირთვამ შეიძლება აჩვენოს ქვედა კოლონტიტული გადასვლა. წინააღმდეგ შემთხვევაში, ის არანაკლებ სწორად მიდის ვიდრე Fx.

თქვენ სპეციალურად უნდა ასწავლოთ Chrome- ს სწორად ქცევა (სკრიპტით) და ამ ფორმით გამოაქვეყნოთ ვერსია განსახილველად. ამიტომ, საიტის მომხმარებლის სკრიპტში ცოტა უფრო რთულია, ვიდრე სტატიაში მოცემულია.

უნდა გავიხსენოთ, რომ ეს არ არის სრულფასოვანი განხორციელება - იგი არ ითვალისწინებს, მაგალითად, მომხმარებლის მიერ ფანჯრის ზომის შეცვლის შემთხვევებს. თქვენ ასევე შეგიძლიათ იხილოთ ქვედა კოეფიციენტის სიმაღლის შეცვლის იშვიათი (პრაქტიკაში) კომბინაციები გადაადგილებამდე და მის შემდეგ, სადაც ლოგიკა დაიწყებს გაუმართაობას, უხერხულობის გარეშე. უარყოფითი მხარეები შეგნებულად დატოვეს, რადგან შეიმჩნევა გადახედვის სირთულის ბალანსი და ამოხსნის დროულობა.

შედეგად, ეს აღმოჩნდა საკმაოდ სამუშაო სამუშაო სქემა, ყოველ შემთხვევაში სწრაფი სტაციონარული კომპიუტერებისთვის. ქვედა კოლონტიტულის არასწორი ქცევის აღმოჩენის შემთხვევაში, "underFooter" პარამეტრი უნდა გამორთული იყოს.

რომელი გვერდებისათვის არის ეს სასარგებლო?

სტანდარტულ საიტზე, მომხმარებლის სტილის გარეშე, Q&A მოკლე გვერდებიც კი აღემატება 1500 პიქსელს, რაც უმეტეს შემთხვევაში უხილავია ჰორიზონტალური მონიტორებით. ჩვეულებრივი მონიტორების შემთხვევაშიც კი ხშირად გვხვდება მომხმარებლების პირადი გვერდები, რომელთა სიმაღლე დაახლოებით 1300 პიქსელია, სადაც გაუტეხელი ქვედა კოლონტიტული იხილავს მთელი თავისი დიდებულებით. მომხმარებლის პარამეტრებში არცერთი გვერდი არ არის ძალიან გრძელი.

თუ იყენებთ ZenComment მომხმარებლის სტილებს, ისინი მნიშვნელოვნად ამცირებენ საჭირო გვერდის სიმაღლეს და შესაძლოა HabrAjax მომხმარებლის სკრიპტმა არ აჩვენოს გვერდითი ზოლის ზოგიერთი ან ყველა გვერდითი ზოლი. ამიტომ, სკრიპტებთან და სტილებთან ერთად, უფრო ხშირად შეინიშნება დაუდგენელი ქვედა კოლონტიტულის ეფექტი. ამიტომ, ლოგიკურია, რომ ქვედა კოლონტიტულის ჩანაწერი პირველად გამოჩნდა HabrAjax– ში. ჩვეულებრივ საიტსაც კი აქვს რამდენიმე გვერდი, სადაც სასარგებლო იქნება ფრჩხილის ქვედა კოლონტიტული.

იქნება მხარდაჭერა?

ბოლო ერთი წლის განმავლობაში საიტის ქცევამ აჩვენა, რომ დეველოპერებმა (და შესაბამისად მენეჯმენტმა) დაიწყეს იმ ფუნქციების განხორციელება, რომლებიც ადრე მხოლოდ მომხმარებლის სკრიპტებსა და მომხმარებლის სტილებში არსებობდა. მაგალითად, წლის დასაწყისში დავწერე, სადაც უამრავი პატარა სურვილი შევაგროვე. ექვსი თვის შემდეგ, მას დავუბრუნდი და კმაყოფილებით აღვნიშნე (პირდაპირ ტექსტში; თქვენ ხედავთ "UPD" და თარიღებს), რომ სურვილებში აღწერილი რამდენიმე ფუნქცია უკვე განხორციელდა საიტზე.

შემდეგ, კომენტარების შეფასების ველების ნაცვლად, მოდით გადავხედოთ "ისრებს". ისინი almalexa- ს ("გამაუმჯობესებელი") მომხმარებლებში გამოჩნდნენ დაახლოებით 3 წლის წინ და ZenComment- ში მიიღეს 2 წლის წინ. დაახლოებით 2-3 თვის წინ ისინი გამოჩნდნენ საიტზე. იწყებს იმის დაჯერება, რომ რამდენიმე ხნის შემდეგ ისრები გარკვეულ მანძილს გავრცელდება, როგორც ეს ხდება ZenComment- ში (რიცხვის მარცხნივ ერთი ისარი, მეორე მარჯვნივ), რათა ნაკლები გამოტოვოთ.

ამიტომ, ალბათ, "ფრჩხილების ქვედა კოლონტიტული" ჰაბრეს შესახებ ისეთი ფანტაზია არ არის, როგორც ეს შეიძლება ჩანდეს დაახლოებით 3 წლის წინ.

გააცნო HabrAjax დამწერლობის სხვა მახასიათებლებიბოლო 3 თვის განმავლობაში (შეგიძლიათ გამორთოთ პარამეტრებში):
* შეყვანის ველების ავტორებს (ოპერაში შეიძლება შეანელონ დიდ ტექსტებს);
* კვირის დღეები თარიღებისთვის, გარდა "დღეს" და "გუშინ";
* მოვლენები არხში, დასაკეცი 1 ხაზით და 2 სიმბოლოთი;
* სიტყვების "habr *" შემცირება "χ ·" და "χα";
* თარიღების მითითებები სტატიების ნომრების მიხედვით - მოცემულია URL– ში მითითებული ნომრის მიხედვით, რომელი თვის და წლის იყო სტატია ჩატვირთვამდე;
* ჩაიკეტა "დაკავშირებული შეტყობინებები" 2 სიტყვად. Pop-up "დაკავშირებული პოსტების" ეკრანის ანაბეჭდი (ნაჩვენებია 12 ბმული და არა 4).

ეს ერთგვარი კოშმარია! რატომ ხდება თქვენი საიტის ქვედა კოლონტიტული კვლავ "popup" და გადაიტანოს დიზაინი? არ არის გამორიცხული სწორად დააჭიროთ ქვედა კოლონტიტულს გვერდის ქვედა ნაწილში? შინაარსი თუ აგური! მოთავსდება აგური მონიტორში?

ვხედავ, მაშინ იჯექი და არაფერს გააკეთებ, სანამ ჩვენს სტატიას ბოლომდე არ წაიკითხავ.

თქვენი საიტისთვის სწორი ქვედა კოლონტიტულის შექმნა

საიტის მრავალი მფლობელი ამ პრობლემას აწყდება, როდესაც გვერდის ქვედა კოლონტიტული მხოლოდ "იხსნება". შემდეგ კი გაუგებარია რა უნდა გააკეთოს. ყველაზე ხშირად, ასეთ ნაკლოვანებას სცოდავს ვებგვერდების დიზაინები, რომლებიც სწრაფად ჩამოყალიბებულია საკუთარ თავზე ( წრე "გიჟები ხელები") ან დამწყები ვებდიზაინერები.

ამავე დროს, საიტის ცხოვრების დასაწყისში, საშინელი არაფერი ხდება. და ეს იდილია გრძელდება მანამ, სანამ შინაარსი თავისი "წონით" დააჭერს სარდაფს, ხელს უშლის მის აწევას. მაგრამ ღირს ნაკლები მასალის განთავსება გვერდზე, და ცოტა ხნის წინ "მშვიდი" ქვედა კოლონტიტული მყისიერად იწევს, რაც საიტის მთლიანი დიზაინის შეუფერებლად გამოიყურება.

განლაგების შაბლონის ამ "დეფექტის" აღმოსაფხვრელად არ არის საჭირო ფულის დახარჯვა ვებმასტერის სერვისებზე. ყველაზე ხშირად, საიტის ქვედა კოლონტიტულის ჩანაცვლება შეგიძლიათ საკუთარ თავს. გაითვალისწინეთ ყველა შესაძლო ვარიანტი ასეთი პრობლემის აღმოსაფხვრელად:

პირველი გზა

ქვედა კოპირება გვერდის „ბოლოში“ დასამაგრებლად დაფუძნებულია CSS– ზე. დავიწყოთ კოდის მაგალითზე და შემდეგ უფრო დეტალურად გავითვალისწინოთ მისი განხორციელება:

html (სიმაღლე: 100%;) სათაური, nav, განყოფილება, სტატია, განზე, ქვედა კოლონტიტული (ეკრანი: ბლოკი;) კორპუსი (სიმაღლე: 100%;) # შესაფუთი (სიგანე: 1000px; მინდორი: 0 ავტომატი; min- სიმაღლე: 100 %; სიმაღლე: ავტო! მნიშვნელოვანია; სიმაღლე: 100%;) # სათაური (სიმაღლე: 150 პიქსელი; ფონის ფერი: rgb (0,255,255);) # შინაარსი (შევსება: 100 პიქსელი; სიმაღლე: 400 პიქსელი; ფონის ფერი: rgb (51,255,102) ;) # ფეხსაცმელი (სიგანე: 1000 პიქსელი; მინდორი: -100 პიქსელი ავტო 0; სიმაღლე: 100 პიქსელი; პოზიცია: ფარდობითი; ფონის ფერი: rgb (51,51,204);)

ქვედა კოლონტიტული გვერდის თეგის ქვედა ნაწილში შესაკრავად