Задать вопрос
@mkvmaks
html

Как прижать footer к низу страницы?

Всем привет. Есть сайт, структура в коде ниже:
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="utf-8">
    <link href="css/style.css" rel="stylesheet" />
</head>

<body>
    <div id="wrapper">
        <div class="topbar"></div>
        <header>
            <div class="navbar navbar-default navbar-static-top">
                <div class="container">
                </div>
            </div>
        </header>

        <div class="downbar"></div>

        <footer>
            <div class="container">
               
            </div>
        </footer>
    </div>
    <a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>
</body>
</html>


CSS

#wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

footer {
    background: #092e52;
}

footer  {
    position: absolute;
    width: 60px;
    height: 1px;
    bottom: -1px;
    right: 0;
}


Пытался прижать различными способами например как тут описано: https://proweb63.ru/help/all-about-css/css-footer-... (скобки убрать).

Вся верстка разъезжается. Что делаю не так???? Спасибо
  • Вопрос задан
  • 93 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
mizutsune
@mizutsune
I will live forever in the flame of your eyes.
Это реализуется многими способами, но вот например как можно сделать гридами:

Разметка: 

<div class="wrapper">
     <header></header>
     <main></main>
     <footer></footer>
</div>


Стили:

.wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    min-height: 100vh;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@mkvmaks Автор вопроса
Нашел рабочий еще способ:

#Wrapper {
    display:inline-block;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 100px);
}
footer {
    height: 100px;
}
Ответ написан
Комментировать
Комментировать
AlexandrVV86
@AlexandrVV86
#wrapper{
min-height: 100vh; // сделаем обертку минимум с высоту экрана
display: flex;
flex-direction:column;
}

.downbar{
flex-grow: 1; // сделаем downbar жадным - он заберет все свободное пространство и прижмет футер к низу
}

Код будет работать если вы уберете absolute у футера

Код не совсем понятный, хотя правильней сказать совсем не понятный:

footer {
position: absolute;
width: 60px;
height: 1px;
bottom: -1px;
right: 0;
}

"Абсолютный" футер высотой 1px и шириной 60px ? Серьезно? Зачем?
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать верстку двух страниц из фигмы
22 нояб. 2024, в 09:58
5000 руб./за проект
Доделать проект
22 нояб. 2024, в 09:57
3000 руб./за проект
Написать продающую и сео-оптимизированную структура для сайта
22 нояб. 2024, в 09:42
30000 руб./за проект
Ещё заказы