перерыв нижнего колонтитула на альбомной ориентации на небольших устройствах

Question

Я хотел создать нижний колонтитул, который должен оставаться в нижней части каждого экрана, я сделал это, но проблема в том, что он ломается при альбомной ориентации на небольших устройствах, но при портретной ориентации он работает нормально.

  body, html {
    height: 100vh;
    position: relative;
  }

  .footer {
    background: #0066cc;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }

<div class="footer">
    <div class="content">
        <h4><small>Powered by</small> <img class="footer-img" src="images/logo.png" alt=""></h4>
    </div>
</div>
  

Я хочу, чтобы он оставался на дне каждого устройства, а также в ландшафте !!

Answer 1

Я сделал это с помощью этого кода, он остается внизу страницы в альбомной и портретной ориентациях

-первый раз я сделал css на моем контейнере (основной div)

.container{
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
width: 100%; }

-второй я меняю нижний колонтитул css

.footer{
background: #0066cc;
position: absolute;
bottom: 0;
width: 100%; }

и это исправило мою проблему.

кстати, вы не сталкиваетесь с этой проблемой каждый раз, но когда вам не хватает контента для вашей страницы, нижний колонтитул покинет свое место, и вы получите дополнительное пространство на разных устройствах даже в веб-просмотре, но когда вы достаточно содержимого для страницы, тогда нижний колонтитул всегда будет оставаться внизу.

Answer 2

Вам просто нужно изменить способ позиционирования нижнего колонтитула. Как вы и хотели в той же позиции, fixed вместо absolute выполнит эту работу.

body,html{
height: 100vh;}

.footer{
background: #0066cc;
position: fixed;
left: 0;
bottom: 0;
width: 100%; }