Задать вопрос
Этот вопрос закрыт для ответов, так как повторяет вопрос Как прижать футер?
@Zumich

Как прекрипить футер к самому нижу?

Здравствуйте, столкнулся с проблемой то что контент(Изображения и текст) проходят через футер и сам футор не закреплен в самом нижу. Помогите исправить, заранее спасибо) (Использую препроцессор SCCS)

64778e835de41238940724.png

<footer class="footer">
    <div class="footer__social">
      <a href="/" class="footer__vk"><img src="./images/Vk.svg" alt=""></a>
      <a href="/" class="footer__discord"><img src="./images/Discord.svg" alt=""></a>
      <a href="/" class="footer__telegram"><img src="./images/Telegram.svg" alt=""></a>
  </div>
  </footer>


.footer {
    background-color: #0e0e0e;
    width: 1903px;
    height: 104px;
    top: 1023px;
    margin-top: auto;
    position: relative;
    &__social {
      display: flex;
      justify-content: center;
      gap: 9px;
    }
    &__vk {
      display: block;
      background-repeat: no-repeat;
      background-size: cover;
      width: 75px;
      height: 35px;
      margin-top: 7px;
      position: relative;
    }
    &__discord {
      display: block;
      background-repeat: no-repeat;
      background-size: cover;
      width: 102px;
      height: 35px;
      margin-top: 7px;
      position: relative;
    }
    &__telegram {
      display: block;
      background-repeat: no-repeat;
      background-size: cover;
      width: 111px;
      height: 35px;
      margin-top: 7px;
      position: relative;
    }
}
  • Вопрос задан
  • 133 просмотра
Подписаться 1 Простой 9 комментариев
Ответы на вопрос 1
scoffs
@scoffs
Fullstack | C# | Student
Прежде всего хочу сказать, что в вашем коде есть намёк на БЕМ и вы даже используете SCSS, но при этом вы вообще не используете переиспользование БЭМ-классов. Почитайте, пожалуйста, об этой методологии и избавьтесь от каши в стилях.

Ответ на ваш вопрос:
https://dimox.name/press_footer_bottom_with_css/

<body>
  <header>
    <!-- Ваш хедер -->
  </header>

  <main>
    <!-- Основной контент страницы -->
  </main>

  <footer>
    <!-- Ваш футер -->
  </footer>
</body>

*, *::before, *::after { 
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body {
  flex: 1; /* Расширяет основной контент на все доступное пространство */
}

header, footer {
  flex-shrink: 0; /* Предотвращает сжатие хедера и футера */
}
Ответ написан
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы
04 дек. 2024, в 12:26
5000 руб./за проект
04 дек. 2024, в 12:04
10000 руб./за проект
04 дек. 2024, в 11:57
60000 руб./за проект