Задать вопрос

Как прижать 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-... (скобки убрать).

Вся верстка разъезжается. Что делаю не так???? Спасибо
  • Вопрос задан
  • 113 просмотров
Подписаться 1 Простой 1 комментарий
Ответ пользователя Александр Варлаков К ответам на вопрос (3)
#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 ? Серьезно? Зачем?
Ответ написан
Комментировать