lavezzi1
@lavezzi1

Контент во всю оставшуюся высоту?

Есть довольно типичная админка. https://imgur.com/a/hKJK7Ez

Есть навигация вверху и какой то контент. Контент как и везде обернут в несколько дивов, в котором как правило, ограничивается ширина, выравнивается по центру и прочие обертки которые нужны для библиотеки (vue). Вопрос, как растянуть контент во всю оставшуюся высоту? Конечно можно на каждую обертку вещать flex и flex grow на ребенке, но это будет дико не красиво. Есть какие то красивые альтернативы?
  • Вопрос задан
  • 81 просмотр
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
В вопросе ответ: flex-grow. Но судя по постановке вопроса, у тебя с этим плохо, так как ничего сверхсложного и некрасивого в этом нет.

В качестве альтернативы можно использовать calc(100vh - [headerheight]), которое необходимо модифицировать под существующие условия, но корректно будет работать только, если шапка фиксированная, в противном случае необходимо задействовать JS.

И чем дальше, чем хуже относительно максимально корректной реализации на флексах.
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Либо flex-grow. Не понятно, почему вы его боитесь.
Либо гридами
grid-template-rows: min-content 1fr;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы