დღეს გასწვალით თუ, როგორ შეიძლება DIV-ებისა და CSS-ის მეშვეობით  ფუტერის ყოველთვის ერთ ადილას მოთავსება, ანუ სულ ბოლოში.

რა არის footerstick?

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

Footerstick

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

ახლა კი კოდის წერას შევუდგეთ.

HTML კოდი

დავიწყოთ HTML ტეგებით, გამოვიყენოთ ეს კოდი:

[html]
<div id="container-page">
<div id="container-content">Content</div>
<div id="container-foot">Foot</div>
</div>
[/html]

ეს IE-სა და Mozilla-სთვის, ამ ბრაუზერებს სჭირდებათ იმის მითითება, რომ ორივე ტეგი, HTML და BODY, საჭიროებს პარამეტრ height: 100% -ის დანიშნვას. ოღონდ რატომ არ მკითხოთ, ეს მე თვითონაც არ ვიცი : )

CSS კოდი

[css]

#container-page {
width: 600px;
background: #DDD;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
[/css]

ამ კოდში კი ვუთითებთ, იმას რომ ჩვენი იდენტიფიკატორის, container-page-ის კონტეინერი, რომელიც გარს აკრავს ფუუტერსა და კონტენტს, იქნება მაქსიმალური სიმაღლის.

position: relative; - ეს ნაწილი არის მნიშვნელოვანი, და მისი შეცვლა არ შეიძლება!

[css]#container-content {padding-bottom: 40px;}[/css]

ამ კოდით კი ვუთითებთ, იმას რომ იყოს რამოდენიმე პიქსელი დატოვებული ქვემოდან… ანუ bottom-იდან… სადაც განთავსდება ჩვენი ფუტერიც.

და ბოლოს

[css]#container-foot {
width: 100%;
background: #CCC;
position: absolute;
bottom: 0 !important;
bottom: -1px;
height: 40px;
}
[/css]

ესეც ჩვენი ფუტერის DIV კონტეინერის კოდიც, აქ ჩვენ უნდა დავუმატოთ ერთი პარამეტრიც, სიმაღლის პარამეტრი, წინააღმდეგ შემთხვევაში მთელი ეს კოდი არ იმუშავებს, ასე რომ ამ CSS-ს კოდს უნდა დავუმატოთ, height: 40px;, 40px, იმიტომ, რომ ჩვენ, კონტენტის კონტეინერს ავღუნიშნეთ 40პიქსელიანი სივრცე ეკრანის ქვემოთა ნაწილიდან.

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

გისურვებთ წარმატებებს, ეს კი შეგიძლიათ გადმოწეროთ, Source ფაილები, რომელიც ამ სტატიაში გამოიყენებოდა.

footerstick-ის გადმოწერა