Довольно часто появляется необходимость прижать подвал к низу страницы, даже если высота контента сайта меньше высоты экрана. В этом нам помогут такие прекрасные свойства, как position и bottom.
На первый взгляд задача очень простая - просто поместить один div внизу страницы. Однако стоит учесть, что наполнение контентом может быть меньше страницы.
Начнем с самого просто, допустим у нас есть <div> подвала с каким-то наполнением:
Этот footer обязательно помещать перед закрывающим тэгом </body>, не помещая дополнительно его внутрь других дивов.
Вот, как будет выглядеть CSS стиль для этого footer, чтобы он был прижат всегда к низу страницы:
Абсолютное позиционирование заставляет <div> размещаться на странице, полностью игнорируя другие элементы. bottom и left задают координаты этого дива на экране.
Казалось бы, все - подвал прижат к низу страницы, когда наполнение контентом меньше высоты страницы все выглядит как надо. Но нет, вы заметите, если полнить контентом страницу больше высоты экрана, то часть наполнения скроется под подвалом, все потому, что абсолютное позиционирование дает эффект игнорирования других элементов, и, возможно, у вас появится пустое место под подвалом.
Чтобы избавиться от этих двух проблема, нужно сделать дописать CSS стиль для <html> тэга, да-да, именно <html>, а не <body>, иначе все не будет работать как надо, вот как будет выглядеть этот стиль:
Вы должны знать, что абсолютное позиционирование зависит от позиционирования родительских элементов. Таким образом, если позиционирование у родительского элемента relative, то отсчет координат идет относительно краев этого родительского элемента. Минимальная высота нужна, если контента меньше, чем высота экрана, чтобы подвал все-таки был прямо внизу страницы.
Проблема с перекрытием контента подвалом решается разными путями, но самый хороший, по моему мнению, добавить тэгу <body> значение padding снизу, равное или чуть больше высоте подвала, чтобы контент не вплотную прилипал к подвалу, примерно такой стиль:
Теперь все, подвал будет всегда внизу, он не будет заставлять появляться полосу прокрутки, если контента меньше. Проще говоря, это универсальный метод. Теперь я приведу пару примеров использования этого метода, чтобы вы сами убедились в его действии.
У нас есть примерно такой html код:
И такой CSS код:
Вот как будет выглядеть это все, если контента меньше, чем высота экрана:
А вот пример того, как будет выглядеть сайт, если наполнение сайта больше высоты экрана(отличие только в HTML коде, добавил еще несколько абзацев с текстом):
Добавить комментарий
Авторизоваться с помощью: