@ColdSpirit

Текстуры и футер снизу. Как заставить работать flex нормально?

Приветтсвую! Два дня не могу решить проблему растягивающегося контента, который прижимает футер к низу. Также есть текстура, прибитая к низу элемента body. Нужно чтобы это всё работало вместе, без всяких врапперов и пушеров.

Вот пример: codepen.io/anon/pen/MKBqOK
При увеличении размеров сайта можно увидеть, что футер выходит за рамки body, следовательно он становится ниже текстуры. Если использовать шаблон min-height: 100vh;, то в хроме блок контента не растягивается по высоте. Если с футера и хедера убрать flex-shrink: 0;, то они будут сужаться, что не хорошо.
  • Вопрос задан
  • 252 просмотра
Решения вопроса 1
@ColdSpirit Автор вопроса
Как стоило отчаяться и задать вопрос, так сразу и решил проблему)
Приведу урезанный код макета (самое основное), с растягивающимся контентом и жесткими элементами, а также текстура снизу работает как ожидается.

Код HTML:
<html>
    <body>
        <header>header</header>
        <main>
            content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        </main>
        <footer>footer</footer>
    </body>
</html>


Код CSS:
body /* как я понял, тэг html трогать не обязательно */
{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main /* растягивающийся контент-блок */
{
    flex: 1 0 auto;
}

header, footer
/* И прочие жесткие элементы,
что на одном уровне с растягивающимся блоком.

Можно для них создать класс, допустим .no-flex */
{
    /* задаем размер блокам */
    height: 100px;

    /* чтобы размер не изменялся при увеличении контента */
    flex-shrink: 0;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы