Как стоило отчаяться и задать вопрос, так сразу и решил проблему)
Приведу урезанный код макета (самое основное), с растягивающимся контентом и жесткими элементами, а также текстура снизу работает как ожидается.
Код 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;
}
Средний
