Коригиране на "долния колонтитул" в долната част на страницата с помощта на Flexbox
В процеса на оформяне на оформления разработчикът често се сблъсква със следния проблем: ако няма достатъчно съдържание, „долният колонтитул“ се показва някъде в средата на страницата.
Тази ситуация възниква, когато „долният колонтитул“ на сайта е със статична позиция и се намира в края на маркировката на страницата. Както виждаме на снимката, "футъра" няма какво да го избута надолу и той се намира в центъра на екрана, а под него има доста свободно място.
В тази кратка бележка ще разгледаме един модерен метод за закрепване на долен колонтитул в долната част на страница, без значение колко съдържание съдържа.
За да предотвратим ситуацията, описана по-горе, ние ще създадем нашата страница с помощта на Flexbox, усъвършенстван инструмент от CSS3, използван за създаване на адаптивни сайтове.
За тези читатели, които все още не са запознати с тази технология, връзки към полезни ресурси за Flexbox ще бъдат поставени в долната част на статията.
Нашата демо страница се състои от заглавка, съдържание и долен колонтитул - всичко е както обикновено, нищо особено.
За да активирате режима Flexbox, трябва да добавите правило за показване: flex към елемента body и също така да промените посоката на полетата (по подразбиране те са хоризонтални). Елементите html и body трябва да имат височина 100%, за да запълни страницата целия екран.
Сега трябва да уточним колко място ще заема всеки от изброените елементи. За да направим това, ще използваме универсалното CSS свойство flex, което комбинира следните свойства на flexbox:
- flex-grow - Указва колко място ще "отнеме" елементът от своя родител;
- flex-shrink - Колко ще се свие елементът, когато няма достатъчно място за съседни елементи;
- гъвкава основа -размер на елемента по подразбиране;
Искаме "заглавието" и "долният колонтитул" да заемат толкова място, колкото им е необходимо, а останалото място да бъде запазено за основното съдържание на страницата. Следният CSS код ще ни помогне с това:
За да видите как работи всичко, посетете демонстрационната страница на връзката в края на статията.
Кликнете върху големия розов бутон в средата на основния блок със съдържание, което ще добави малко текст и изображение към страницата.
Така се демонстрира как ще изглежда страницата с различно количество съдържание.
Заключение
Както можете да видите, Flexbox е чудесна помощ при създаване на оформления от нулата. Всички основни браузъри поддържат тази технология с малки разлики, което означава, че можете безопасно да я използвате във вашите проекти, тя ще работи във всички браузъри, започвайки от IE9. Ако искате да разберете кои свойства се поддържат от определени браузъри, използвайте инструмента canIUse.
Ето някои полезни ресурси, за да научите повече за модела Flexbox:
- Кратко ръководство за CSS Flexbox
- Сайт, посветен на "готината" техника за работа с Flexbox
- 5-минутен интерактивен Flexbox урок