5 начина за създаване на лепило долния
Отрицателна долната граница на блок обвивка
Има обвивка на потока, който съдържа всички блокове, с изключение на долната част на страницата. Този блок се определя отрицателен долното поле, равно на височината на долната част на страницата.
Този метод изисква допълнителен елемент в съдържанието (и .Бутонът клас) с негативен марж не е изтеглен и текст зоната на долния не е блокиран. Добави блок тласък беше доста умен решение, защото няма дъно подложка. Ако и това устройство ще бъде пълнеж, той би трябвало да се вземе предвид негативната margin'e.
Отрицателни горната граница на долната част на страницата
Тази техника не се нуждае от тласък блок, но след това, което искате да добавите допълнителен блок обвивка около съдържанието, което е по-нисък пълнеж. Това се прави така, че поради негативното margin'a колонтитул не е бил повдигнат нагоре.
HTML5 и CSS3 практика от нула до резултата!
И двата метода са сходни, защото те искат да се добави допълнително HTML елемент.
накип функцията () намалява височината на обвивката
Един от начините да се откаже от допълнително маркиране е да се регулира височината на обвивката на блок използване изчислено (функция). В такъв случай той няма да се припокриват, двата елемента са свързани и образуват на височина от 100%.
Обърнете внимание на 70 пиксела в Calc () и фиксирана височина 50px долния. Тук ние се вземе предвид, че долната част на страницата има по-нисък марж на 20px. От общата височина е необходимо да се изважда височината на долната част на страницата и по-ниската външна разчленена. Ние също използваме фолксвагена единици, да не иска 100% ръст на тялото, все още не е на 100% от височината на блока обвивка.
Основният проблем с всички методи, описани по-горе е, че има нужда от определена височина на долната част на страницата. В уеб дизайна с фиксирана височина се смята за лош тон, съдържание, в края на краищата може да се промени. Всичко трябва да е гъвкав. Фиксирана височина камбана е лошо. Flexbox ви позволява не само да се добави допълнително маркиране, за да се създаде придържайки долния, но също така да използвате променлива в стойността на височината.
Можете дори да добавите горен в горната или нещо друго. Flexbox може да се използва по два начина:
огъва: 1 дете елемент да запълни пространството (съдържание в нашия случай).
Или марж-нагоре: автоматично за изместване на дъщерните елементи, доколкото е възможно един от друг (или всяка друга посока margin'a).
Оформлението на мрежата още по-нова технология от Flexbox (и с много по-малко поддръжка). Мрежи също могат лесно да бъдат приспособени за придържане долния.
Демото трябва да работи в Chrome Canary и Firefox издание за разработчици. Идеята е, че тя може да бъде пренесен към по-стара версия на решетката за Edge:
Редакция: Екип webformyself.
HTML5 и CSS3 практика от нула до резултата!
Най-IT новини и уеб разработки на нашия канал Телеграма
