0

Не получается прижать блок footer вниз. Подскажите как исправить:

<!DOCTYPE html>
<html lang="rus">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>WORLD BANK Publications</title>
</head>
<body>
    <div class="wrapper">
        <div class="header">aa</div>
        <div class="content">bb</div>
        <div class="footer">cc</div>
    </div>
</body>
</html>

файл style.css

*{
margin: 0;
padding:0;
}

html, body {
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
}

body{
     display: block;
}

.wrapper {
    display: -webkit-flex; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0 auto;
    width: 1024px;
}

.header{
    flex: 0 0 auto;
}
.content {
    flex: 1 0 auto;
}

.footer {
    flex: 2 0 auto;
    height: 55px;
    background: blue;
}

СВ браузере выглядит так:введите сюда описание изображения

К низу не прижимается блок footer

2
  • я исправила, но ничего не меняется Commented 25 сент. 2019 в 10:05
  • @Каролина, у вас не закрыт див с content
    – Игорь
    Commented 25 сент. 2019 в 10:10

1 ответ 1

2

Ответ на ваш вопрос: не закрыт class="content". Ваш код работает, но если задача состоит лишь в том, чтобы прижать футер к низу, на мой взгляд, более лаконичным будет следующий вариант:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1 0 auto;
}

/* temp styles */
.header {
  background: rgba(0,0,0,.3);
}
.content {
  background: #d3d3d3;
}
.footer {
  background: rgba(0,0,0,.3);
}
<!DOCTYPE html>
<html lang="rus">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>WORLD BANK Publications</title>
</head>
<body>
    <div class="wrapper">
        <div class="header">Header</div>
        <div class="content">Content</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>

5
  • я закрыла, но ничего не поменялось Commented 25 сент. 2019 в 10:20
  • 2
    @Каролина, повторюсь, ваш код работает) По ссылке ниже - ваш код. Футер прижат к низу html-документа. codepen.io/Vlastelin/pen/XWrGgJZ
    – Игорь
    Commented 25 сент. 2019 в 10:23
  • @Каролина, попробуйте очистить кэш браузера. Возможно стили из-за этого не меняются(отображаются)
    – Pashok
    Commented 25 сент. 2019 в 11:30
  • dimox.name/press_footer_bottom_with_css
    – daladn0
    Commented 25 сент. 2019 в 13:25
  • переделала верстку нормально теперь Commented 27 сент. 2019 в 15:42

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.