Header, main, footer, маин растягивается до низу, но блок в маине не хочет растягиватся до низа, как реализовать?

Question

[Антон Вебсайтовский]

Header, main, footer, маин растягивается до низу, но блок в маине не хочет растягиватся до низа, как реализовать?

Пробовал разные варианты, что-то не вышло, чтоб все ровно и красиво было, либо приходилось прокручивать в низ, много свободного пространства.



Рабочая схема тут:
jsfiddle.net/vlit/m72w5uob/249

Answer 1

[Антон Вебсайтовский]

Решение

main {
  display: flex;
flex-direction: column;
}
.bgg{
   flex: 1 1 auto;
}

jsfiddle.net/vlit/ea2937ob/1

Answer 2

[12Vadim12]

вот твой случай https://www.youtube.com/watch?v=kNGYuTelE3E&list=L...

Comments

[Антон Вебсайтовский]

Видимо не внимательно читаешь, то что там в видео это сделано ), у меня блок внутри маина. вот его я хочу растянуть.

[12Vadim12]

ну твой черный фон занимает всю ширину твоих тегов, в данном случае это br. Тогда для класса bg задай height:100vh, вот типа такого jsfiddle.net/6vym3ahf . А если считаешь, что смущает прокрутка, уреж это значение к 72vh.

[Антон Вебсайтовский]

12Vadim12, я делал так, это херня, если вытягивать экран, то и height:100vh, надо менять.

[12Vadim12]

ну есть вариант с height: (100vh - остальные элементы типа header footer и элементы main). Но этот вариант тоже относителен, легче было бы показать, что вы хотите реализовать, макет или идею личную.(сомневаюсь что там будет кусок черного фона).

[Антон Вебсайтовский]

12Vadim12, яж пример сделал не зря, тема выше.