У меня есть три вертикально сложенные карточки, расположенные под фиксированным заголовком. Требования:
В свернутом виде каждая карточка должна занимать ровно одну треть видимой области под заголовком.
Когда карточка развернута, она должна заполнять всю видимую область под заголовком (без внутренней прокрутки на странице).
Одновременно можно раскрыть несколько карт; в этом случае каждая развернутая карточка по-прежнему должна занимать всю видимую область под заголовком, располагаясь друг за другом, вызывая прокрутку самой страницы. Когда все карточки развернуты, они будут выглядеть как три «почти полноэкранные» карточки, расположенные одна над другой, поэтому можно будет прокрутить страницу до конца примерно за три шага.
Каждая карточка содержит таблицу с произвольным количеством строк. Таблица должна быть ограничена высотой карточки, чтобы дополнительные строки прокручивались внутри карточки, не меняя высоту карточки.
Все отступы, поля и промежутки между карточками должны соблюдаться.
Что я пробовал:
Использование flexbox: Количество строк в таблицах влияет на высоту карточки. Чтобы ограничить размер таблицы и карты, мне пришлось установить максимальную высоту карты. Однако было неудобно рассчитывать одну треть доступного пространства под заголовком с учетом отступов, полей и пробелов, если только я вручную не вычитал высоту заголовка и интервалы из высоты области просмотра. Я бы предпочел более общее решение без жесткого кодирования для них значений.
Использование CSS-сетки: я добился желаемого поведения для свернутых карточек, но развернуть карточку так, чтобы заполнить все пространство под заголовком и одновременно сдвинуть другие карточки вниз, стало сложно.
Похоже, что эта проблема находится где-то между классической реализацией гибкого интерфейса и сетки. Вопрос:
Каков наилучший подход к созданию такого макета? Должен ли я полагаться на явные вычисления высоты и вычитание или есть более общее и элегантное решение?
Ниже приведен мой код для сценария свернутой карты с использованием сетки.
У меня есть три вертикально сложенные карточки, расположенные под фиксированным заголовком. [b]Требования:[/b] [list] [*]В свернутом виде каждая карточка должна занимать ровно одну треть видимой области под заголовком.
[*]Когда карточка развернута, она должна заполнять всю видимую область под заголовком (без внутренней прокрутки на странице).
[*]Одновременно можно раскрыть несколько карт; в этом случае каждая развернутая карточка по-прежнему должна занимать всю видимую область под заголовком, располагаясь друг за другом, вызывая прокрутку самой страницы. Когда все карточки развернуты, они будут выглядеть как три «почти полноэкранные» карточки, расположенные одна над другой, поэтому можно будет прокрутить страницу до конца примерно за три шага.
[*]Каждая карточка содержит таблицу с произвольным количеством строк. Таблица должна быть ограничена высотой карточки, чтобы дополнительные строки прокручивались внутри карточки, не меняя высоту карточки.
[*]Все отступы, поля и промежутки между карточками должны соблюдаться.
[/list] [b]Что я пробовал:[/b] [list] [*][b]Использование flexbox:[/b] Количество строк в таблицах влияет на высоту карточки. Чтобы ограничить размер таблицы и карты, мне пришлось установить максимальную высоту карты. Однако было неудобно рассчитывать одну треть доступного пространства под заголовком с учетом отступов, полей и пробелов, если только я вручную не вычитал высоту заголовка и интервалы из высоты области просмотра. Я бы предпочел более общее решение без жесткого кодирования для них значений.
[*][b]Использование CSS-сетки:[/b] я добился желаемого поведения для свернутых карточек, но развернуть карточку так, чтобы заполнить все пространство под заголовком и одновременно сдвинуть другие карточки вниз, стало сложно.
[/list] Похоже, что эта проблема находится где-то между классической реализацией гибкого интерфейса и сетки. [b]Вопрос:[/b] Каков наилучший подход к созданию такого макета? Должен ли я полагаться на явные вычисления высоты и вычитание или есть более общее и элегантное решение? Ниже приведен мой код для сценария свернутой карты с использованием сетки.
Мобильная версия