Можно ли сверстать такое БЕЗ Flexbox?

Question

[ZaxapKramer]

Здравствуйте. Вот такая вот "штука" должна получиться в итоге (для наглядности растягивайте/сужайте область просмотра):
jsfiddle.net/0na33aea

А вот видео, в котором я показал, как нужно ресайзить:
vimeo.com/216357461:)

Нужно все то же самое (скроллинг у колонок, центрирование, чтобы это все не ломалось при изменении размера окна).

Но БЕЗ Flexbox, если это возможно.
Пытался блоками, пытался таблицами - то одно не скроллится, то другое не центрируется...
Я не прошу вас сверстать это полностью. Было бы очень здорово, но и подсказки хватит (чем, к примеру, что именно и т.п.).

P.S. Я, конечно, понимаю, что Flexbox - это must have и все такое, но... сейчас нет, если возможно обойтись без этого.
P.P.S. Ребята, то ли я вас не понимаю, то ли вы меня... сделал еще и видео.

Answer 1

[Андрей Федоров]

Можно на calc() сделать, но кажется вас такой вариант то же не устроит?
https://jsfiddle.net/wfL1dq2o/3/

Comments

[ZaxapKramer]

Спасибо, хоть одно не голословное суждение.
Думал о calc(), даже делал на calc() вчера... но вот без calc() нельзя?
Потому что планировалась не фиксированная шапка в первом основном контейнере...
При реализации таблицами ломается height:100%; (повторяюсь в сотый раз).

Так или иначе, спасибо Вам за ответ! Я очень рад действительно содержательному ответу.

[Ankhena]

ZaxapKramer: calc можно заменить на js, который сначала определит высоту шапки.

[ZaxapKramer]

Ankhena W, очень хотел избежать этого всего.
Но в процессе уже посещала навязчивая мысль отказаться от CSS (существующих решений, включая flex) и написать "некий костыль" на js. Но это уже была бы реализация самого Flex:)

[Андрей Федоров]

ZaxapKramer: если js можно, то почему бы не использовать flex-полифил?

[ZaxapKramer]

Андрей Федоров, не знаю, как "везде", но на моем телефоне (недавно купил, 6 тысяч, Андроид) Flex'ы виснут. У некоторых знакомых, которых я просил однажды протестировать flexbox, они отображаются крайне странно... и да, тоже часто виснут. У меня в Chrome часто решения на Flexbox криво отображаются (ресайзятся - после перезагрузки страницы все становится нормально). И да, js на самом деле нельзя.

[Андрей Федоров]

ZaxapKramer: Какой андроид? Какой браузер? У меня на одном из рабочих проектов, показатель отказов в опере мини 54% и меня это не беспокоит. Потому, что пользователей с оперой мини 0.01% от общего числа. Конечно с оглядкой на специфику проекта, но я бы сказал, что flex стабильная технология и ее можно использовать в реальных проектах. Как и calc().

[Ankhena]

ZaxapKramer: js-то почему нельзя?

недавно купил, 6 тысяч, Андроид

странная характеристика для определения работы флексов, лучше бы модели и браузер написали.

[ZaxapKramer]

Ankhena W, я к тому, что не "за 2 тысячи", где просто процессор слабо тянет браузер часто)
Андрей Федоров, андроид; Хром и UC.

Answer 2

[xtala zen]

Если я правильно понял речь идет о двух блоках строго центрированных. Такое спокойно можно сделать с помощью подключенного бутстрап`а и его классов. Т.к. колонок по умолчанию в бутстрап 12, то классам надо задать размерность 6, т.е. .col-lg-6, .col-md-6, .col-sm-6 и .col-xs-6, для обоих блоков соответственно. Если размерность нужна меньше 6, то можно задать и по три, но для центровки по центру придется добавить классы push и pull, т.е к блокам нужно добавить классы

.col-lg-push-3, .col-md-push-3, .col-sm-push-3, .col-xs-push-3

к левому блоку с размерностью 3 и

.col-lg-pull-3, .col-md-pull-3, .col-sm-pull-3, .col-xs-pull-3

к правому блоку с размерностью три.
Так много классов надо для обеспечения адекватного отображения блока на всех экранов, от FullHD до мобильных.
UPD. В комментариях речь идет о скролах, но это просто лирика. Просто блокам надо добавить CSS свойство
overflow: scroll;

Comments

[ZaxapKramer]

Да речь не Бутстрапе... Сразу спрошу: вы ресайзили пример? По ширине и по высоте?

[xtala zen]

ZaxapKramer: за появление полос прокруток отвечает свойство overflow. Подробней здесь htmlbook.ru/css/overflow

[xtala zen]

ZaxapKramer: в твоем случае скорее всего нужно свойство auto. Те полосы прокрутки будут появляться автоматически когда текст перестанет вмещаться в блок.

[ZaxapKramer]

Прошу прощения, но я умею верстать... Я бы сказал, что очень давно поддерживаю Ослов и немного даже отстал от современных тенденций, нежели не знаю как верстать "по-старинке" (таблицами и т.п.).
Просто вчера потратил весь день на реализацию сего... и остался ни с чем. Пришел сюда с примером даже... причем не из Paint'а.

Отвечая на вопросы здесь в комментариях, я все больше понимаю, что либо я не понимаю отвечающих, либо они меня. Больше склоняюсь ко второму.

Специально сделал еще и видео, обновил сам вопрос.

[xtala zen]

ZaxapKramer: ХЗ, что у тебя там за магия, но я вижу центрированный хэдер, два блока под ним, так же центрированных и полосы прокрутки, появляющиеся при переполнении блоков текстом. Нет никаких проблем реализовать это тремя блоками с помощью бутстрап или вручную, если охота пердолиться на разных разрешениях.

[ZaxapKramer]

xtala zen, вероятнее всего, Вы правы, и я очень на это надеюсь. Тогда пойду и снова попробую реализовать это блоками...

[xtala zen]

ZaxapKramer: но без бутстрап будет знатный пердолинг на разных разрешениях. Советую воспользоваться его сетками.

[ZaxapKramer]

xtala zen, так дело в том, что у меня своя сетка. Грубо говоря, такая же...
Только вот я ей не пользовался в данном вопросе: не понимаю, как нормально отцентрировать блок по вертикали, чтобы он при уменьшении высоты окна уменьшался вместе с главным контейнером.......

[xtala zen]

ZaxapKramer: О майн гот, ты же говорил, что умеешь верстать? В чем сложность задать margin-bottom и margin-top для обоих блоков в процентах?

[ZaxapKramer]

xtala zen, что Вы имеете ввиду под этим? В каких процентах? Резиновый контейнер в контейнере, о каких процентах речь? Я не понимаю, как вы предлагаете таким образом это все по-центру сделать?
Ладно, допустим, я не умею верстать. Но тогда покажите мне, как надо.

Answer 3

[MaximMRX]

А кто отменял медиа запросы? Делаешь запрос и на нужном разрешении любые css свойства присваиваешь элементу. И всё

@media only screen and (max-width : 480px){
//Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 480px.
}

Comments

[ZaxapKramer]

А причем здесь вообще media-запросы? Вопрос ведь совсем у другом, вы смотрели пример на jsfiddle?
Media-запросы здесь никак не помогут, они никак не помогут правильно сверстать такое без Flexbox.

[MaximMRX]

ZaxapKramer: Не вижу ничего не обычного на jsfiddle, обычное центрирование больше нету чего-то невозможного. Опишите какого вы эффекта хотите добиться?

[ZaxapKramer]

Максим Студитских,
1. Сверху шапка (необязательно фиксированная)
2. Далее на оставшуюся высоту контейнер
2.1 Шапка2
2.2 Контейнер2
2.2.1 колонки в контейнере2, на которых должен быть СКРОЛЛ

На пункте 2.2.1 я и запаролся, когда пытался сделать все таблицами.
Поресайзите пример: все плавно и четко. У меня так и не вышло добиться max-height: 250px, при этом грамотное уменьшение при изменении высоты у контейнера2 и/или скролла у колонок.

Пытался всевозможным образом комбинировать блоки и таблицы, но... неудачно.

[ZaxapKramer]

Илья Ростопка, забавно. Вы об этом?
.flex { display: block }

[alvvi]

ZaxapKramer: нет, я просто убрал все флекс стили вручную. Единственное, что остается сделать после этого - центрировать внутренний контейнер.

[ZaxapKramer]

Илья Ростопка, интересно. Можете скинуть?

[alvvi]

ZaxapKramer: https://jsfiddle.net/0na33aea/1/, дальше центрируем внутри .flex контейнер любыми техниками вертикального центрирования, можно обернуть их во враппер. Скролл исчезает тогда, когда вы оборачиваете во враппер, height которого меньше, чем height родителя.

[ZaxapKramer]

Илья Ростопка, хорошо, допустим. А теперь мы уменьшаем высоту окна и грустим...

Ваш вариант


Вариант с Flex


Наверное, я чего-то не понял... но как сделать, все же, скролл? Таблицами ничего не выходит, ибо там... ломается высота в 100% от контейнера. Блочные же элементы адекватно не центрируются или при уменьшении окна ломаются.

[Максим]

ZaxapKramer: я подключусь , что требуется сделать ? надо что бы скролл был что ли ??

[ZaxapKramer]

Максим Ленский, да. Чтобы скролл оставался. Только не через Flex'ы. Пример в описании вопроса (это где выше ответов, ссылка на jsfiddle). Скриншоты в моем комментарии выше:)

Перепробовал все, как уже много раз тут говорил. То не центрируется, то криво ресайзится, то скролла нет... Если делать таблицами, height:100%; от контейнера крашится. Такие вот пироги.

Просто я не думаю, что никто не делал подобное еще до flex'ов. У меня тут комплекс всего, что ранее в css реализовалось крайне специфично и часто хаками, насколько я помню и понимаю.

[Максим]

ZaxapKramer: минут 20 погоди - я сверстаю на div без flexbox

[ZaxapKramer]

Максим Ленский, заранее благодарю. Я вчера над этим весь день просидел - беда: что-то, да не так.
Сегодня утром сел и за минут 5-10 заставил работать это на Flex (дабы не переть сюда с рисунками by Paint).

[Максим]

ZaxapKramer: смотри так надо ? https://codepen.io/Geyan/pen/wdPqPG

[ZaxapKramer]

Максим Ленский, нет. Скролл должен быть В КОЛОНКАХ. Да, на этом я и обломался. Поресайзите мой пример на jsfiddle, посмотрите на скришоты. Вот это я имею ввиду.

Просто скролл в колонках - плевое дело. А чтобы это все еще было в контейнере с шапкой, который еще и в центре контейнера с шапкой...

[Максим]

ZaxapKramer: а вы мой пример ресизили ?

[ZaxapKramer]

Максим Ленский, речь идет о любом ресайзе. По ширине менять - это одно. А мне нужно, чтобы все не ломалось при изменении высоты... неужели, все забывают ресайзить высоту?:( Не думал об этом, поэтому и не сказал...

[Максим]

ZaxapKramer: опять проверьте - я ел , чуток доделал

[ZaxapKramer]

Максим Ленский, приятного аппетита. В вопросе добавил видео, что имел ввиду, ибо... почему-то никто меня не понимает.

[xtala zen]

ZaxapKramer:

Наверное, я чего-то не понял... но как сделать, все же, скролл?

Без обид, но что то мне подсказывает, что твоя фраза в моей ветке :

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

не имеет никакой связи с реальностью.

[ZaxapKramer]

xtala zen, ну давайте сверстайте мне то, что я имел ввиду. Возможно, я гляну на это и скажу, что лет мои 5-6 лет front-end маразма были придуманы кем-то другим... Извините, но я сижу тут и впадаю в истерику...ввиду буквально практически потраченных двух дней в попытках что-то сделать.

[xtala zen]

ZaxapKramer: я бы еще не отказался и твою ЗП за тебя получить, почему бы нет?

[ZaxapKramer]

xtala zen, вот эту фигню как раз я делаю для себя.

[alvvi]

ZaxapKramer: изначально речи о том, чтобы оно ресайзилось вертикально со скролом и не шло. Я расскажу вам секрет, почему так происходит: флекс элементы в контейнере с flex-direction: column адаптируются к высоте оставшегося в родителе места и могут использовать его для позиционирования. Блочные элементы ориентируются на высоту своих детей, а когда высота ИХ родителя становится меньше высоты детей, то как действовать дальше дикутет свойство overflow. (кстати, текстовые ноды тоже считаются детьми) Естественно блочному элементу можно задать высоту в процентах и она будет высчитана из высоты родителя. НО, именно из всей высоты родителя, а не из оставшегося места. Грубо говоря, то, что вы просите - изобрести модуль flexbox без flexbox'a. Реализуемо, но только с использованием JS, или, собственно, с использованием flexbox'а.

[ZaxapKramer]

Илья Ростопка, в это, по сути, я и хотел узнать, так или иначе. Вопрос как раз в этом и состоит: "Можно ли сверстать такое БЕЗ Flexbox?". Пересмотрю тогда немного решение и откажусь от шапки не фиксированного размера...