Код HTML:
<body>
<header>
<!-- всяко-разно -->
</header>
<main>
<div class="main_wrap">
<div class="main_row">
<!-- много чего -->
</div>
</div>
</main>
<footer>
<!-- копирайт и т.д. -->
</footer>
</body>
Далее less файл со стилями:
body{
display: flex;
flex-direction: column;
height: 100vh;
}
header{
flex-shrink: 0;
}
main{
flex: 1 0 auto;
.main_wrap{
height: 100%;
.main_row{
height: 100%;
}
}
}
footer{
flex-shrink: 0;
}
Прижимал футер с помощью флексбоксов, все сработало четко вот только в Chrome вложенные эл-ты не хотят растягиваться вслед за main. Проблема с main_wrap и main_row , в Мозилле и IE11 (!!!) они (как и задумывалось) одной высоты с main, а в Chrome по контенту (в случае с min-height то же самое). Что за глюк?
Средний
Простой