Как сделать full screen block?

Question

[Evtera]

https://codepen.io/Demonter/pen/ZEGEQYN

Как сделать так, чтобы весь блок был по высоте экрана?

*Пробовал min-height:100vh, но толку нет. Фон растягивается, но вот второй блок с текстом, который под навигацией, остается по длине контента. Если и второму блоку задать min-height:100vh, то появляется закономерный скролл, так как верхний блок с навигацией забирает часть пространства себе.
* Calc не хочу использовать, ибо тогда при каких-либо изменениях в панели навигации всё сломается.
* Position absolute тоже не желательно.

Есть ещё какие-нибудь варианты?

Заранее, спасибо!

Comments

[Antony Bark]

Сейчас вопрос непонятен:
1. закрасьте блоки разным цветом (background, в целях тестирования и ориентации по макету)
2. пишите в вопросе имя блока, о котором идёт речь

Answer 1

[strelok011]

Если я правильно понял сумбур вопроса и разметку (что-то во вложенности header > header__wrapper > header_panel + Main-Screen какая-то ДИЧЬ :)))) ), вам нужен какой-либо из этих рецептов, связанных с прибитием футера к низу страницы dimox.name/press_footer_bottom_with_css
Как и автор - рекомендую использовать flex, как наиболее соответствующий моменту.

p.s. не используйте в наименованиях css классов больших букв.

Comments

[Evtera]

Я читал это, но дело в том, что свойство Flex: 1 1 auto по каким то причинам не работает для центрального блока. Оно работает только для блока panel. Мне же нужно сделать центральную часть на весь экран )

[strelok011]

Всё там работает. Вам нужно почитать, каким способом во флексе регулируется заполняемость свободного места.

Вот побыстрому собрал
https://codepen.io/Strelok011/pen/jOPOqbP

[strelok011]

Не соглашусь. Технически - да, можно творить что угодно.
Можно оформление и на id вешать.

По факту - есть понятие стайл-гайдов.
Вот, например https://google.github.io/styleguide/htmlcssguide.h...
Чем больше порядка в коде - тем проще его поддерживать.
Если есть сложившиеся практики - лучше использовать их. Чтобы следующему после вас разработчику не пришлось спотыкаться.

[strelok011]

Дополню еще таким замечанием - при пересечении стилей с JS можно словить очень большие проблемы пренебрегая регистром наименований

В JavaScript kebab-case не подходит из-за синтаксического правила. "-" недопустим в идентификаторе, поэтому padding-top недопустимо для переменной или имени свойства.

В CSS использование camelCase не является хорошей практикой, поскольку в CSS не учитывается регистр. className и classname тот же идентификатор для CSS.

[strelok011]

Тогда ваш совет начинающему разработчику окажется скорее подножкой нежели чем-то полезным.

[strelok011]

Moon Presence не согласен :) Но тред превращается в личную переписку....
Evtera Прошу прощения.

[Antony Bark]

strelok011, Moon Presence, это не только ваш спор, это развёрнутый ответ с разных точек зрения.
strelok011 обосновывает необходимость формализации, Moon Presence - право на эксперименты.