Отзывчивый "липкий" подвал сайта.
Всем привет. Сегодня я покажу, как создать отзывчивый "липкий" подвал сайта.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Отзывчивый футер</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
This is the content
</div>
<footer>
<div class="wrapper">
This is a footer
</div>
</footer>
</body>
</html>
Теперь перейдем к CSS.
html, body {
margin: 0;
display: table;
height: 100%;
width: 100%;
}
.wrapper {
padding: 20px;
height: auto;
}
footer {
background: slategrey;
display: table-row;
height: 1px;
}
Все. Теперь добавьте в первый блок с .wrapper много текста(воспользуйтесь emmet и напишите p*10>lorem) и добавьте текста в блок футера(p*2>lorem). После уменьшайте размер браузера и смотрите, как футер автоматически подстраивается по высоте и ширине.
Итак, на этом все. Спасибо за внимание!
-
Создано 16.06.2014 20:13:13
-
Михаил Русаков
Комментарии (4):
в доктайпе забыли восклицательный знак, если не ошибаюсь
Ответить
Спасибо! Исправлено.
Ответить
не совсем понятно что именно особенного происходит
Ответить
за emmet спасибо посидел отдельно разобрался как подключить в notepad
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.