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

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

Здравствуйте, столкнулся с проблемой то что контент(Изображения и текст) проходят через футер и сам футор не закреплен в самом нижу. Помогите исправить, заранее спасибо) (Использую препроцессор 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 просмотра
9 комментариев
Подписаться 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; /* Предотвращает сжатие хедера и футера */
}
Ответ написан
Ваш ответ на вопрос

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

Потому что уже есть похожий вопрос.
Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы