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

Question

[Zumich]

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

<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;
    }
}

Comments

[Aspirant555]

position: absolute;
bottom: 0;

[Zumich]

aspirantes, Не чего не изменилось

[Aspirant555]

Zumich,

position: fixed;
bottom: 0;

[Froggyweb]

scss на данном этапе должен быть под запретом.
далее - реально понимать правила, которое ты пишешь.

width: 1903px;
    height: 104px;
    top: 1023px;
    margin-top: auto;
    position: relative;

ширина 1903px - зачем? у меня например на буке 13чего-то, есть монитор на 1600 и еще один на 1920. как мне это все скролить?

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

фиксированная высота - это экстраординарный случай в вебе. а если надо текст в две строки или описание больше.... это фу....

top: 1023px; - при position: relative; это означает смести элемент на 1023 рх относительно того где он должен быть.....

[Froggyweb]

aspirantes, не давай плохие ответы и советы на возможно глупый вопрос. Иначе тебе придёт в поддержку сайт с такой версткой.

[Aspirant555]

Froggyweb, Не существуют плохие инструменты, но бывают кривые руки.

[ThunderCat]

aspirantes,

Не существуют плохие инструменты, но бывают кривые руки.

Ммм, молодость и наивность, как мило...

[Ankhena]

aspirantes, ну да, когда не было гридов и флексов, приходилось извращаться и так, как вы пишете. Но сейчас-то зачем такое советовать?

[Ankhena]

Zumich, в современном мире, футер прибивают к низу страницы флексами или гридами. Способы многократно описаны и легко гуглятся по запросу "липкий футер", "sticky footer".
Вариант с флексами более предпочтителен при разной структуре страниц. Например, если не все страницы четко состоят из header, main, footer. Тогда проще задать flex-grow для main, чем думать для которой строки на какой странице задать 1fr в гриде.

На вашей странице футер уже встанет на приличное место, если прекратить задавать ему свойства, смысл которых вы не понимаете. А именно про relative и координаты.

Высоту в верстке тоже стараются не задавать. Мы никогда не знаем сколько будет контента (в том числе он может различаться и в разных языковых версиях), шрифт, который окажется у пользователя и т.д.
Так что у футера её лучше убрать.

Зачем вы пишете три раза одинаковые свойства для трех соц.сетей. А если их будет 10? Так и будете долбить? Может всё таки им один общий класс задать?

Answer 1

[Семён Окулов]

Прежде всего хочу сказать, что в вашем коде есть намёк на БЕМ и вы даже используете 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; /* Предотвращает сжатие хедера и футера */
}