Bjornsen
@Bjornsen
Happy coder

Почему body min-height не работает?

Этот вопрос наверняка уже задавался не раз, но в поиске я не нашел решений для своей задачи. В общем есть следующий каркас:
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <div class="wrapper">
        <div class="row">
            <nav class="nav-main col-lg-2">
                <ul>
                    <li>Home</li>
                    <li>Test</li>
                </ul>
            </nav>
            <div class="content col-lg-10">
                <h2>Test</h2>
 Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.
            </div>
        </div>        
    </div>
    <footer>
        TEMP FOOTER
    </footer>
</body>
</html>

main.css:
* {
    margin: 0;
}

html, body {
    position: relative;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    background-color: #EDEEF0;
    height: calc(100% - 50px);
}

.nav-main {
    background-color: #364552;
}

.content {
    background-color: #ffffff;
}

footer {
    position: absolute;
    background-color: #292929;
    color: #ffffff;
    height: 50px;
    bottom: 0;
    right: 0;
    left: 0;
}

.row {
    margin: 0;
}

И я ожидал, что wrapper и body растянутся на всю высоту и footer соответственно прижмется к низу, но итог получился таким: https://codepen.io/Enkelad/pen/OdPKbP
5c4890a1131bf777060379.png
Посмотрел в одном из вопросов вариант перед min-height: 100% написать height: 100%, и проблему это решило, НО, если в блоке .content будет больше содержимого, то body и wrapper до конца не растягиваются, футер к низу не прижимается и получается вот такое чудо: 5c48911874f16380271647.png
  • Вопрос задан
  • 1160 просмотров
Решения вопроса 2
@Alexey10
Лучше в 2019 году для прижатия футера к низу использовать flexbox.

<html>
<body>

<div class="wrapper">

  <div class="content"></div>

  <div class="footer"></div>

</div>

</body>
</html>


* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex: 0 0 auto;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@hesrun
Min-height 100%, работает только в том случае, если у родителя указан height, в вашем случае это ,html тэг
Ответ написан
@levazver
Site builder
Насколько я понимаю, ожидается прибитый внизу фиксированный футер? Тогда просто изменить CSS.
footer {
    position: fixed;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы