Расширить section на всю высоту экрана?

Question

[Alex Wells]

Здравствуйте. Я бэкэнд разработчик с некими знаниями фронта. Сверстали мне сайт на bootstrap4 с хард-записанными высотами. В итоге не получается нормально сделать position: absolute + bottom: 0, ибо оно улетает под экран.

Нужно, что-бы высота section ровнялась всей высоте, что осталась на экране кроме nav. Далее тоже самое с вторым container-fluid h-100. В итоге весь основной контент должен быть растянут на полную высоту экрана.

vh не подходят, ибо при маленьком разрешении все улетает вниз, при большом - вверх.

Comments

[iBird Rose]

100vh подходит. просто при адаптации нужно изменить это значение. к примеру фиксированно задать в px

[Alex Wells]

iBird Rose: Не подходит. 100vh стоит и улазит вниз.

[Kovalsky]

Так вам нужно window.height === nav.height + section.height или window.height === section.height?

[iBird Rose]

Alex Wells: 100vh это высота всего экрана. ясное дело нельзя задавать внутреннему блоку 100vh. вычитайте высоту меню к примеру и остальные высоты.

[Alex Wells]

Никита Полевой: Первое. window height === nav.height + section.height. Ко всему остальному, всередине section есть еще и два container-fluid, первый из которых появляется только на маленьких экранах.

Так-что к первому вырежению еще и второе: section.height === container-fluid1.height (0 если скрыт) + container-fluid2.height

[Alex Wells]

iBird Rose: Верстал не я.

Дело в том, что высота section - не 100vh. А значит мы не можем оперировать vh вовсе.

[Kovalsky]

Alex Wells: не, он имеет в виду calc(100vh - {высота блоков})

[Alex Wells]

Никита Полевой: А, так я и без calc так сделать могу, захардкодить, только тогда это не работает)

[Alex Wells]

Никита Полевой: Забираю слова назад, кажись что-то выресовывается

[Alex Wells]

Никита Полевой: С calc почти получилось! Осталась одна единственная проблема:

на мобилке появляется container-fluid hidden-md-up, и из-за него нижний контейнер больше на высоту этого самого мобильного контейнера.

Нужно сделать calc -высотаКонтейнера только когда он виден. Сейчас буду эксперементировать. Если кто-то знает - буду признателен!

В любом случае, спасибо за ответы!

[Alex Wells]

navbar бустрепа, к примеру, растягивается по высоте в зависимости от ширины экрана..

Не пойму, как в зависимости от этого варьировать высоту section.

[Kovalsky]

Alex Wells: в приведенном мною топике как раз такое проблема была у человека - у него был макет на бутстрапе, он хотел адаптацию по высоте. Ему объяснили, что проще всего переопределить некоторые стили бутстрапа и сделать кастомно на флексе. Собственно, в примере и в топике всё описано.

[Alex Wells]

Никита Полевой: Я вам признателен, спасибо за ответ и примеры!

Я уже решил проблему с помощью calc. Вышло немного костыльно (3 media), но явно лучше, чем было, к тому-же работает идеально.

Я смотрел Ваши примеры еще перед решением, но из-за моих кривых рук ничего не получалось( Добавлял flex'ы куда угодно, как угодно, даже по примеру - работало не так, как в примерах.

Возможно верстальщик что-то намудрил в кастомных стилях, возможно я кривой по жизни, но увы(

В любом случае еще раз спасибо Вам и всем остальным за ответы!

Answer 1

[Kovalsky]

У вас там хардкода такое количество, что сходу разобраться и выдать готовое решение сразу для всего макета не представляется возможным, тем более бесплатно. Но в общем случае можно было бы пользоваться флексом для этого:

Топик на SO + пример