Как создать каркас верстки который будет считаться по высоте, а не по ширине?

Question

[tgarl]

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

Теперь к сути хотят вот такой макет


при этом чтобы большие блоки(картинки, пропорция 3/4) были строго до нижней видимой области экрана,по сути весь этот дизайн должен быть в пределах видимости получается, на всех экранах выше 1366(ноуты), левая с альтернативными картинками по ширине до 300px, блок с карточками между картинками адаптивный занимающий всю ширину между картинками
И я не могу понять как такой каркас задать чтобы он был адаптивен и картинки не занимали процент по ширине, а занимали по высоте только видимую область, ниже пойдут(или не пойдут) всякие вы смотрели, вам может подойти ...

Comments

[alexalexes]

Сначала определитесь с минимальными версиями браузеров Chrome, IE, FF, решив подобные вопросы:
1. Можно ли на любой машине с XP переустановить условно IE 9 на IE 11 по соображениям безопасности, совместимости софта и т.д.
2. Можно ли отговорить пользователя не использовать IE11 а только Chrome или FF максимальной версии для XP.
3. Нужен ли особый браузер в паре с работой каких-нибудь криптографических систем, скажем Яндекс браузер + КриптоПро.
Когда у вас появится в ТЗ, что нужно поддерживать Chrome [ОТ версии номер], IE [ОТ версии номер], FF [ОТ версии номер], вот тогда можно говорить, какую технологию верстки применять.
PS: Что-то мне подсказывает, что даже при современных версиях браузерах для вертикальной верстки вам придется подвязывать размеры обязательно видимых блоков в области просмотра с помощью JS.

[tgarl]

у самых продвинутых
максимальная версия FF 115
максимальная версия хрома 109
максимальная версия Edge 109
У кого-то ниже, нельзя обновить поэтому гриды у половины не поддерживаются, флексы вроде у всех работают

Устанавливать что-то другое нельзя, обновиться нельзя, работаем с тем что имеем - я сразу написал это в теме

[Антон Антон]

tgarl, вам пишут про минимальные версии (максимальные версии на самых древних используемых ОС или минимальные из тех, которые нельзя обновить), а вы указываете максимальные ("у самых продвинутых")

[Антон Антон]

Глобально - если calc и vh работает, то можно все через них указывать. или вообще через таблицы

[tgarl]

Антон Антон, мне нужно чтобы хотя бы у самых продвинутых заработало как надо, а с остальными буду разбираться потом(там не так просто добиться ответа, многие вот так общаются - я не знаю сами разбирайтесь что у меня тут стоит сайт не работает, ничего не могу сделать, а после целого дня переписок выясняется, что всего-то всплывающий баннер не появился сегодня)

Answer 1

[Антон Антон]

вот такой подход даже в ie6 работает: https://codepen.io/FragsterAt/pen/vEgJBmG

Comments

[tgarl]

а таблица это идея, что-то я уперся в блочную верстку, спасибо

Answer 2

[Катя]

Вот с помощью flex. Правда с неймингом не очень: Ссылка

Answer 3

[AndreiNik222]

Оберни всё в таблицу (``) высотой во весь экран. Старые ОС это понимают, а блоки не уедут за видимость.

Answer 4

[Iliya_Melnik_hjkr]

Попробуй object-fit: cover для картинок и высоту через 100vh. Адаптивность между колонками отлично разрулит старый добрый Flexbox. Главное - не забудь про префиксы!