Почему не прилипает футер к низу страиницы, при отдалении?он поднимается вверх при зуме для большого разрешения?(ctrl + колесо) position: relative не помогает а absolute не подходит здесь
1 ответ
Так footer будет всегда будет прижат к нижнему краю окна браузера, даже если содержимое страницы занимает не весь экран
.content {
min-height: 100vh;
position: relative;
padding-bottom: 100px
}
.content .footer {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
line-height: 100px;
bottom: 0;
left: 0;
background: #ccc
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id viverra lacus, eget sodales mauris. Suspendisse in enim eget est ultrices varius sit amet ac massa. Suspendisse non ligula ut felis vulputate placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nec dolor varius, sodales ligula eget, rutrum neque. Integer a ultricies est, sit amet elementum erat. Sed posuere dui urna, vel volutpat leo posuere a. Aenean cursus finibus dui, at accumsan ex vulputate et. Aenean mi velit, ultrices at felis eget, ullamcorper efficitur odio. Nunc in dignissim risus. Cras non arcu nisi. Pellentesque fermentum erat quis tellus ultricies, facilisis malesuada odio mattis. Nulla facilisi. Aliquam ultricies mauris non felis volutpat semper.</p>
<p>Curabitur egestas ligula vel augue ornare pulvinar. Donec velit felis, tempor vestibulum arcu id, varius posuere est. Duis bibendum elit porta nunc auctor tincidunt. Aenean metus elit, pharetra quis justo quis, dapibus ultrices massa. Curabitur nunc odio, tempor sit amet sodales nec, sollicitudin et erat. Etiam eu pellentesque nulla, eu facilisis enim. Donec bibendum consectetur mi, ac pharetra nulla. Quisque at urna aliquam, mollis ipsum sit amet, ultrices diam. Morbi lobortis felis vitae lorem interdum suscipit id malesuada leo. Donec blandit ipsum ac scelerisque dignissim. Sed feugiat iaculis dolor in tempus. Vivamus posuere ultrices ipsum a volutpat. Nam posuere, urna ut mattis ornare, turpis ipsum elementum massa, sit amet placerat lorem tellus ut mi.</p>
<div class="footer">FOOTER</div>
</div>
-
Никита,а можете сказать, в чём моя ошибка? Мне нужен футер который будет независимо от контента всегда прилеплен к низу. Не фиксированый,как у Вас именно. В чём моя ошибка? Почему у меня футер зависит от контента? Commented 2 нояб. 2018 в 15:06
-
Что значит фиксированный? У меня, если текста много и есть скролл, футер будет просто в конце страницы, как обычно. А если текста мало, он не будет отрываться от нижнего края окна. Или нужно, чтобы футер вообще всегда на экране был? Commented 2 нояб. 2018 в 15:10
-
Нет, нужен sticky footer, чтобы независимо какое колличество контента не было, но чтобы хедер был прижат к верху(он и так прижат) а футер к низу, но не postion:fixed, чтобы он не был виден при скроле,а просто именно был прилипший к нижней части документа. Вот как на скрине, только какого-то, он при большом разрешении ползет вверх, так-как прижат к предудущей секции. Commented 2 нояб. 2018 в 15:24
-
Не понятно. Если где-то видели, как должно быть, приложите ссылку Commented 2 нояб. 2018 в 15:27
-
Я просто криво излагаю мысли, можно глянуть первые 15 секунд,чтобы понять о чем я) Но мне интересна своя ошибка,что не так youtube.com/watch?v=qlCIXXhSX6Y Commented 2 нояб. 2018 в 15:31
position:fixed
иbottom:0
?