Как прекрипить футер к самому нижу?
Здравствуйте, столкнулся с проблемой то что контент(Изображения и текст) проходят через футер и сам футор не закреплен в самом нижу. Помогите исправить, заранее спасибо) (Использую препроцессор 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 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; } } |
.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; } }
Дополнительно:
position: absolute;
bottom: 0;
position: fixed;
bottom: 0;
далее - реально понимать правила, которое ты пишешь.
width: 1903px; height: 104px; top: 1023px; margin-top: auto; position: relative; |
width: 1903px; height: 104px; top: 1023px; margin-top: auto; position: relative;
ширина 1903px - зачем? у меня например на буке 13чего-то, есть монитор на 1600 и еще один на 1920. как мне это все скролить?
футер должен быть в потоке. как прижать его к низу при короткой странице есть масса примеров, бери решения с флекс или лучше с грид
фиксированная высота - это экстраординарный случай в вебе. а если надо текст в две строки или описание больше.... это фу....
top: 1023px; - при position: relative; это означает смести элемент на 1023 рх относительно того где он должен быть.....
Не существуют плохие инструменты, но бывают кривые руки.
Ммм, молодость и наивность, как мило...
Вариант с флексами более предпочтителен при разной структуре страниц. Например, если не все страницы четко состоят из header, main, footer. Тогда проще задать flex-grow для main, чем думать для которой строки на какой странице задать 1fr в гриде.
На вашей странице футер уже встанет на приличное место, если прекратить задавать ему свойства, смысл которых вы не понимаете. А именно про relative и координаты.
Высоту в верстке тоже стараются не задавать. Мы никогда не знаем сколько будет контента (в том числе он может различаться и в разных языковых версиях), шрифт, который окажется у пользователя и т.д.
Так что у футера её лучше убрать.
Зачем вы пишете три раза одинаковые свойства для трех соц.сетей. А если их будет 10? Так и будете долбить? Может всё таки им один общий класс задать?
Ответы:
Прежде всего хочу сказать, что в вашем коде есть намёк на БЕМ и вы даже используете SCSS, но при этом вы вообще не используете переиспользование БЭМ-классов. Почитайте, пожалуйста, об этой методологии и избавьтесь от каши в стилях.
Ответ на ваш вопрос:
https://dimox.name/press_footer_bottom_with_css/
<body> <header> <!-- Ваш хедер --> </header> <main> <!-- Основной контент страницы --> </main> <footer> <!-- Ваш футер --> </footer> </body> |
<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; /* Предотвращает сжатие хедера и футера */ } |
*, *::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; /* Предотвращает сжатие хедера и футера */ }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы прекрепить футер к самому низу страницы, существует несколько способов. Вот некоторые из них:
1. Использование CSS:
Вы можете использовать CSS для прекрепления футера к нижней части страницы. Для этого установите высоту контейнера (например, `min-height: 100vh;`) и задайте фиксированную позицию для футера (например, `position: fixed; bottom: 0;`). Вот пример CSS:
footer { position: fixed; bottom: 0; width: 100%; background-color: #333; color: #fff; text-align: center; }
2. Использование Flexbox:
Flexbox - это мощный инструмент для создания гибких макетов. Вы можете использовать Flexbox для прекрепления футера к нижней части страницы. Просто оберните содержимое страницы в контейнер с `display: flex; flex-direction: column; min-height: 100vh;` и задайте футеру свойства `margin-top: auto;`. Вот пример CSS:
.container { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } footer { margin-top: auto; background-color: #333; color: #fff; text-align: center; }
3. Использование Grid:
Если вы предпочитаете Grid вместо Flexbox, вы также можете использовать его для прекрепления футера к нижней части страницы. Создайте сетку с помощью свойства `display: grid;` и установите высоту контейнера на `min-height: 100vh;`. Затем задайте футеру свойство `grid-row: 2;` для помещения его в конец страницы. Вот пример CSS:
.container { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } footer { grid-row: 3; background-color: #333; color: #fff; text-align: center; }
Выберите подход, который лучше всего подходит для вашего проекта и примените его к вашему коду. Надеюсь, это поможет вам прекрепить футер к самому низу страницы!