Блог

Главная - Вопросы по программированию - нижний колонтитул не привязывается к низу на маленьком экране

нижний колонтитул не привязывается к низу на маленьком экране

#html #css

#HTML #css

Вопрос:

У меня адаптивная веб-страница. Моя проблема в том, что нижний колонтитул оказывается в середине страницы, когда он отображается на устройстве с маленьким экраном. Когда я тестирую на устройствах с шириной менее 1200 пикселей, нижний колонтитул заканчивается сразу после положения экрана. Это то, что я получаю на маленьком экране (ширина менее 1200 пикселей):

Фиксированный размер

И на экране с разрешением более 1200 пикселей (это то, что я должен получить на устройствах с меньшим экраном): Полный размер

Где:

  • ЗЕЛЕНЫЙ — размер страницы
  • КРАСНЫЙ — размер экрана
  • СИНИЙ нижний колонтитул

И там идет мой код:

 <footer>
    <p>Footer text</p>
<footer>

.

 footer {
    position: relative;
    bottom: 0;
    clear: both;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}

РЕДАКТИРОВАТЬ: position: fixed; не решает, так как мне это нужно внизу страницы, а не на экране.

Комментарии:

1. Можете ли вы показать нам свой полный код?

2. используйте position:fixed;

3. Я хочу, чтобы нижний колонтитул был внизу страницы, а не на экране. Это position: fixed не решает проблему

4. Вы пробовали устанавливать нижний колонтитул с позицией: фиксированный и снизу: 0?

Ответ №1:

 footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}

@media screen and (min-width: 500px) {
   footer {
      position: relative;
   }
}  
 <footer>
  <p> Footer Text here</p>
</footer>

В примере точка разрыва 500px равна и нет 1200px . Попробуйте изменить размер окна вашего браузера и посмотрите, как это происходит.

Ответ №2:

Проблема, которую вы пытаетесь решить, называется липким нижним колонтитулом, и ее не следует решать position: fixed . Есть другое решение, которое даст вам лучшие результаты, например, с помощью Flexbox

HTML

 <body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

CSS

 .Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

Подробнее об этом здесь: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer /

Ответ №3:

По неизвестным причинам высота была установлена слишком на 100% для устройств размером менее 1200 пикселей. CSS:

 @media screen and (max-width: 1200px) {
    #base {
        ....
        height: 100%;
    }
}

Удалил только эту строку, и все работает. Была такая структура страницы:

 <body>
  ....
  <div id="base">
    .....
  </div>
</body>
<footer>..</footer>