Разглеждал съм доста уроци из мрежата за това как да си направим така наречения "лепкав" футър. Много от тях обаче или имаха доста излишен код или бяха куци, като изпълнение или изобщо не сработваха на някои места.
Всъщност подобно упражнение ми се наложи да правя за първи път преди няколко години, когато никой не подозираше, че е възможно да се получи само с CSS. Честно казано единствените работещи варианти бяха свързани с изписаването на една купчина javascript код. Разбира се в момента, благодарение на js библиотеки може да се направи изключително лесно, но я си представете, че на сайта ви няма грам javascript и някак не върви да зареждате цяла библиотека, за да постигнете резултата. Точно за това в този урок ще разгледаме варианта, в който може да създадете Sticky Footer само с CSS.
Доста мислих как да ви представя демото, така че да е максимално разбираемо и реших да го направя в две части - в първата ще ви покажа изключително опростен вариант, за да видите колко малко е нужният код, а във втората ще покажа версия с по-разчупен лейаут, т.е. как работи в реални условия. Всичко е тествано и работи под актуалните версии на популярните браузъри и на не чак толкова актуалния IE6. Тук може да видите цялото демо и да си свалите всички файлове.
| View DemoDownload |
Kакто вече казах и мрежата има доста уроци как да направим "лепкавия" футър само с CSS, но всички те или използват малко нелогични методи в писането на HTML или имат купища излишен CSS код. Друг минус на уроци, които съм преглеждал е, че всъщност те не обясняват изобщо поради каква причина пишем повечето от нещата. Тук съм опитал максимално да опростя кода и с няколко думи да ви обясня какво аджеба пишем и защо го пишем. Все пак имайте предвид, че понякога нещата се пишат, защото просто така работят и не трябва да се търси логика в тях. Това важи най-вече за по-старите браузъри. Но нека преминем към същността на урока.
HTML
Както виждате нищо сложно с HTML-a, но мисля, че е по-добре да обясня цялата логика след като видите и CSS-a.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> <title>Sticky Footer само с CSS!</title> </head> <body> <div id="container"> <div id="main"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere, odio quis gravida placerat, leo mi facilisis lectus, eu adipiscing sapien massa quis felis. Sed sapien arcu, posuere a ultricies sit amet, accumsan sed tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus id arcu sem, id commodo mi. Fusce aliquet malesuada est at sodales. Donec sit amet elit at risus aliquam mollis at ut ipsum. Cras suscipit tempus elit, a lacinia felis mollis ac. Maecenas ullamcorper lectus at nulla consequat vel lacinia libero consectetur. Aliquam erat volutpat. In et erat mi, eget ultrices massa. Sed mauris leo, tempor sed rhoncus quis, aliquam ac arcu. Mauris sagittis scelerisque est, non porta mi aliquam in. Nunc iaculis bibendum consectetur. Maecenas tempus ornare nunc, sed consequat turpis scelerisque quis. Nullam varius purus ut nulla tincidunt dignissim.</p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam scelerisque facilisis est vel posuere. Nulla ultrices ante sed lectus ultricies ultricies? Integer magna leo, aliquam sit amet aliquam nec, malesuada eu quam. Maecenas sed ligula quis arcu iaculis malesuada. Proin sem diam, porttitor sit amet ultricies ac, tempus in risus. Vestibulum diam velit, blandit eu consequat nec, varius et dui. Vivamus quis mi quis eros ultrices dictum. Nulla blandit, justo non sodales blandit, massa augue sagittis odio, sed vestibulum sem ligula sit amet mi? Donec sit amet orci velit. Duis malesuada venenatis bibendum. Nulla facilisi. Suspendisse ut nisl id nisl luctus semper et ut elit. Aliquam dolor dui, eleifend eget porta nec, fringilla ut nibh. In ac dui id diam molestie scelerisque ac quis neque.</p> </div> </div> <div id="footer"> <p>Аз съм футър и винаги съм залепен отдолу!</p> </div> </body> </html>
CSS
Тук съм поставил коментари в самия код, защото иначе ще е непосилно да обясня всичко с две думи.
html, body {
margin:0;
padding: 0;
height: 100%; /* Разпъва html и body до края на екрана */
}
p {
width: 500px;
margin: 0 auto 10px;
color: #444;
font: 12px/18px Tahoma, sans-serif;
text-align: justify;
}
#container {
_height: 100%; /* 1. Коригира правилната позиция на футъра при голямо количество текст. 2. При IE6, height = min-height, така че го ползваме за коригиране на позицията при малко количество текст. */
min-height: 100%; /* Слага минимална височина = височината на екрана */
}
#main {
padding-top: 20px;
padding-bottom: 150px; /* Височината трябва да бъде равна или по-голяма от на тази на футъра. Слага се, за да не отива съдържанието под/над футъра и има ефект при повече текст. */
}
#footer {
height: 150px;
margin-top: -150px; /* Стойноста трябва да е отрицателна и равна на височината на футъра */
background: #BEBDB9;
}
#footer p {
text-align: center;
}
И така, каква е логиката на цялото нещо? Създаваме div id="container" и div id="footer". Контейнерът има височина 100% и избутва футъра извън екрана. След това си харесваме виочина за футъра, като в примера е 150px и със същата тази стойност (посредством отрицателен margin-top: -150px) преместваме футъра нагоре. Тук обаче при повече съдържание в контейнера, футърът застава под (или над) съдържанието и пречи. Точно за това в container създаваме още един div id="main", на който слагаме padding-bottom: 150px; (стойност равна или по-голяма от височината на футъра) и получаваме финалния резултат. Коя стойност за какво е съм написал в коментарите в самия код, така че няма нужда се повтарям.Както сами виждате всичко изглежда доста логично, но е въпрос на подбор на правилен xHTML и CSS.
Това беше опростеният вариант и демото му може да видите тук.
Сега нека преминем към "по-сложната" версия. Всъщност няма нищо сложно в нея, просто съм разиграл малко по-различна ситуация - такава, в която имаме лейаут на стандартен уебсайт. Нарочно съм сложил padding и border във футъра, за да ви напомня, че те също са част от височината му и трябва да се съобразявате с нея. Демото може да видите тук.
Това е общо взето. Не е трудно, но е пипкава история, защото при по-сложни ситуации някоя стойност може да ви бяга, така че внимавайте. Sticky Footer-ът е нещо много готино и полезно, и се среща на доста места, особено в дизайн тип Smashing Magazine, където имаме хедър и футър по продължение на екрана. Принципно може да ползвате "лепкавия" навсякъде, но съветът ми е да помислите преди това.
Надявам се да съм бил полезен с този урок! Ако имате въпроси - пишете!
Loading ...
Минуса на този начин е, че винаги трябва да се знае точната височина на футъра, а в някои случай неможе да е фиксирана.
Като всеки един метод и този си има плюсове и минуси :). В случая съм представил най-простия и оптимизиран вариант, който би свършил работа на много хора (особено начинаещи) и би спестил време. Частните случаи, в които футърите нямат фиксирана височина са наистина малко и честно казано аз не се сещам скоро да съм виждал такъв. Има ги, но не са за масата.
Точно за това си оставяме вратичка и за друг урок, който някой ден може да се появи и който да покрива точно материята, за която говориш :).
"му може да видите тук" води към:
Error 404 - Not Found
Грешно URL. Благодаря, оправено е! :)
Браво хубаво сайтче :)
на мен ми свърши хубава работа урока...
за футър с динамична височина зададох min-height и margin-top:-(минималната височина);
ако измизлите по кадърден вариант ще се радвам да го науча и него ;)