Прилипающий футер
Иногда возникает задача сделать футер прилипающим. Что под этим имеется ввиду? Ну вот допустим, у нас на какой-то странице контента так мало, что футер вместо того, чтобы быть внизу - там, где ему и полагается быть, - улетает вверх. Выглядит это не очень красиво.
Что нужно сделать, чтобы такого не было?
Во-первых, при необходимости создать обёртывающий класс, который будет охватывать всю нашу страницу, кроме футера. Приведу пример:
<html>
<head></head>
<body>
<div id="wrap">
...
</div>
<div id="footer">
</div>
</body>
</html>
А в файле CSS пропишем уже следующие стили:
html, body {
height:100%;
}
#wrap {
min-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-bottom: 50px;
}
#footer {
height:50px;
margin-top:-50px;
}
Здесь цифра 50 - это высота футера и в то же время отступы, которые нужно сделать внутри wrap, дабы контент не заползал на footer, у которого в свою очередь есть отрицательный внешний отступ. box-sizing нужен для того, чтобы учитывались рамки при вычислении высоты обёртки.
Хочу обратить внимание, что для такого замысловатого трюка был использован чистый css, без всяких скриптов.
Вы должны авторизоваться, чтобы оставлять комментарии.
Комментарии ()