Чуйний "липкий" підвал сайту.
Всім привіт. Сьогодні я покажу, як створити чуйний "липкий" підвал сайту.
lang="En"gt;
charset="UTF-8"gt;
чуйний футер
rel="Stylesheet"href="Style.css"gt;
class="Wrapper"gt;
This is the content
class="Wrapper"gt;
This is a footer
Тепер перейдемо до 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 * 10gt; lorem) І додайте тексту в блок футера (p * 2gt; lorem). Після зменшуйте розмір браузера і дивіться, як футер автоматично підлаштовується по висоті і ширині.
Отже, на цьому все. Дякую за увагу!
Поділися в соціальних мережах:
Схожі
Як зробити відео в якості фону сайту на html5. (1/2).
Як створити "вислизати" меню на css.
Як зробити слайдер на чистому css3 без використання jаvascript.
Як притиснути футер до низу
Як вирівняти по центру блок змінної ширини.
Як зробити аккордіон на чистому css3.
Як притиснути футер до нижньої межі сторінки (позиціонування).
Як створити progressbar за допомогою плагіна для jquery.
Як зробити блоки зі слайдер ефектом на чистому css3.
Як притиснути футер до низу сторінки (табличний спосіб).
Як зробити прогрес бар на чистому css3.
Як зробити ефект вдавленого тексту на css3.
Як зробити просту навігацію на html5 і css3.
Css3 трансформації.
Тіні для тексту і блоків.
Красива форма з індикатором заповнення.
Коментарі у вигляді бульбашки.
Clearfix на css
Верстаємо круглі кнопки на css3.
Вивчаємо sass. Основи.
Приклади тіней на css.
Як зробити просту навігацію на html5 і css3.
Як притиснути футер до низу
Коментарі у вигляді бульбашки.
Як зробити прогрес бар на чистому css3.
Як зробити слайдер на чистому css3 без використання jаvascript.
Як зробити блоки зі слайдер ефектом на чистому css3.
Тіні для тексту і блоків.
Верстаємо круглі кнопки на css3.
Як притиснути футер до низу сторінки (табличний спосіб).
Clearfix на css