Проблема с resize()

[Vlad_P]

http://vladp.esy.es/

Я не стал сооружать в верстке 3-х колоночный макет из колонок равной высоты, а просто выровнял их через js. Помогите пожалста с проблемой: при изменении размеров окна меняется высота центральной колонки. Я вызываю функцию по событию resize, однако выравнивания не происходит. В js крайне слаб, сам не могу понять.

[abrahadabra]

Если не возражаете, укажу на главные ошибки.
 

Я не стал сооружать в верстке 3-х колоночный макет из колонок равной высоты

Это главная ошибка. Нужно было сделать именно то, что вы делать не стали.
 

… а просто выровнял их через js.

это следующая ошибка. Не надо такого делать через js.
 

просто выровнял их через js

это не просто. Но, кажется, вы уже сами это поняли.
 

выровнял их через js … В js крайне слаб

Если признаёте свою слабость в js, то не надо хвататься сразу за сложные вещи, особенно когда это неправильное применение. И особенно, когда на css это делается очень просто.

 

Ну и подумайте логически, что вы делаете.

Вы устанавливаете высоту элементам. Им жёстко задаётся высота, типа как инлайновые стили.

А потом по событию resize вы делаете что:

читаете высоту каждой колонки и всем устанавливаете максимальную.

А какую высоту вы читаете? Конечно же, ту самую, которая установлена предыдущим вызовом функции.

[Dias]

а что сложного в блоках одинаковой высоты? или все до сих брезгают table-cell?)) есть flex-box еще.

[abrahadabra]

Вам объяснить, почему брезгуют table-cell?

Бывают сложности с размерами. Всё-таки у таблиц работа с размерами отличная от блоков, ячейки часто не слушаются свойств width и height, отдавая предпочтение контенту.

 

А вот оснований не использовать флекс не вижу. На нём раскладка делается легко и красиво.

А если нужна поддержка IE8, то под условным комментарием подключаем отдельный файл стилей, в котором флоаты, а на высоту забить.

[Dias]

Вам объяснить, почему брезгуют table-cell?

Бывают сложности с размерами. Всё-таки у таблиц работа с размерами отличная от блоков, ячейки часто не слушаются свойств width и height, отдавая предпочтение контенту.

 

А вот оснований не использовать флекс не вижу. На нём раскладка делается легко и красиво.

А если нужна поддержка IE8, то под условным комментарием подключаем отдельный файл стилей, в котором флоаты, а на высоту забить.

Можно добавить внутри обертку, и ей задать размер, но что-бы сработало нужно чтобы все внутренне обертки в сумме по ширине давали 100%. Хотя да это все равно геморой)

[vladmih]

ячейки часто не слушаются свойств width и height,

через !important они становятся очень даже послушными))))

[Igor Schnaider]

через !important они становятся очень даже послушными))))

Нет :-)

 

Можно добавить внутри обертку, и ей задать размер, но что-бы сработало нужно чтобы все внутренне обертки в сумме по ширине давали 100%.

table-layout: fixed + добавить последнюю ячейку с нефиксированной шириной (это так прост, так не надо делать :-) )

[vladmih]

через !important они становятся очень даже послушными)))) Нет :-)

как это?

http://codepen.io/anon/pen/NxrQVO

Левая резина, правые фикс. Пляши как хочешь

http://codepen.io/anon/pen/NxrQVO

[Igor Schnaider]

Ну и причем здесь !important. Он всего лишь перебивает специфичность правила.

Да и правые у вас не фиксированные получились.

[vladmih]

Ну и причем здесь !important. Он всего лишь перебивает специфичность правила.

Да и правые у вас не фиксированные получились.

Так речь же шла, о том что как сделать три колонки одной высоты. Автор пришел к js.

Ниже сказали, что можно таблицами, но "ячейки часто не слушаются свойств width и height".

Как видно моего пена, все слушается...

В пене, левая резиновая, центральная и права фиксированная...

[abrahadabra]

вот чуть исправленный ваш пен:

 

http://codepen.io/anon/pen/jWMOEq

 

точно-точно колонки той ширины, которая в стилях прописана?

[Igor Schnaider]

В пене, левая резиновая, центральная и права фиксированная...

Да нет же :-) плющит их на малых размерах.

 

http://codepen.io/anon/pen/dGpyMQ?editors=110

[vladmih]

вот чуть исправленный ваш пен:

 

http://codepen.io/anon/pen/jWMOEq

 

точно-точно колонки той ширины, которая в стилях прописана?

В этой ситуации конечно она разползется! Но кто будет засовывать в контейнер блок ширина которого больше контейнера?

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

 

В пене, левая резиновая, центральная и права фиксированная...

Да нет же :-) плющит их на малых размерах.

 

http://codepen.io/anon/pen/dGpyMQ?editors=110

 

У автора ведь не респонс структура...?

[Igor Schnaider]

У автора ведь не респонс структура...?

Да я не об этом. Я лишь уточнил, что 1) они у вас не фиксированные 2) !important тут никакой роли не играет (уберите, то же самое у вас будет).

[vladmih]

 

вот чуть исправленный ваш пен:

 

http://codepen.io/anon/pen/jWMOEq

 

точно-точно колонки той ширины, которая в стилях прописана?

В этой ситуации конечно она разползется! Но кто будет засовывать в контейнер блок ширина которого больше контейнера?

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

 

В пене, левая резиновая, центральная и права фиксированная...

Да нет же :-) плющит их на малых размерах.

 

http://codepen.io/anon/pen/dGpyMQ?editors=110

 

У автора ведь не респонс структура...?

 

А флекс конечно адекватно себя ведет?

http://codepen.io/anon/pen/jWMOEq

Я тут с пеной у рта вообще не пойму что доказываю... Парень, три колонки одинаковой высоты на js пишет...

А вы ему флекс впариваете, Когда он видимо даже не знаю о другом решении кроме своего костыля.

Я думал что если и изучать каскадные таблицы стилей, то начинать нужно именно с самого начала, а заканчивать флексами.

И коли это городской портал, уже щас представляю как бабулька на внучка компе под win7, пытается разобраться в этих флексах, в поисках номера телефона ЖКХ... Дай Бог ей здоровья...

 

вот чуть исправленный ваш пен:

 

http://codepen.io/anon/pen/jWMOEq

 

точно-точно колонки той ширины, которая в стилях прописана?

В этой ситуации конечно она разползется! Но кто будет засовывать в контейнер блок ширина которого больше контейнера?

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

 

В пене, левая резиновая, центральная и права фиксированная...

Да нет же :-) плющит их на малых размерах.

 

http://codepen.io/anon/pen/dGpyMQ?editors=110

 

У автора ведь не респонс структура...?

 

И вопрос, как такую гифку запилил?

[Igor Schnaider]

А флекс конечно адекватно себя ведет? http://codepen.io/anon/pen/jWMOEq

Там таблица (точнее, display: table), не флекс.

 

Я думал что если и изучать каскадные таблицы стилей, то начинать нужно именно с самого начала, а заканчивать флексами.

Нет, знать нужно конечно, и то, что можно таблицами сверстать, тоже верно. Но ведь это не отменяет того, что flex все же гораздо удобнее, чем display table, table-row, table-cell...

 

И коли это городской портал, уже щас представляю как бабулька на внучка компе под win7, пытается разобраться в этих флексах, в поисках номера телефона ЖКХ... Дай Бог ей здоровья...

Не понял...

 

И вопрос, как такую гифку запилил?

QuickTime'ом  с экрана снял :-)

[abrahadabra]

 

вот чуть исправленный ваш пен:

 

http://codepen.io/anon/pen/jWMOEq

 

точно-точно колонки той ширины, которая в стилях прописана?

В этой ситуации конечно она разползется! Но кто будет засовывать в контейнер блок ширина которого больше контейнера?

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

Вспомните, что внутри этих ячеек может быть пользовательский контент, и там может быть всё что угодно.

Например, может быть в одной из колонок картинка, ширина которой превышает. И max-width:100% не поможет. А может ничего не быть, или одно коротенькое слово. И тогда ячейка усохнет.

В общем, не надо, ненадёжно это очень.

[vladmih]

http://codepen.io/anon/pen/LGRYOM
пен не сохранил...

 

Вспомните, что внутри этих ячеек может быть пользовательский контент, и там может быть всё что угодно. Например, может быть в одной из колонок картинка, ширина которой превышает. И max-width:100% не поможет. А может ничего не быть, или одно коротенькое слово. И тогда ячейка усохнет. В общем, не надо, ненадёжно это очень.

Я вот поражаюсь, два года назад когда у флексов было поддержки 30% - 40%, юзали таблицы(не путать с табличной версткой) и не стеснялись, и надежность всех устраивала, и в наше время, это уже ненадежно стало...

Да и в настоящее время, встречаю проекты, в которых используется именно этот метод верстки колонок... И хоть бы кто-то покраснел.

Моё ИМХО, еще пока рано... Вот когда я напишу просто display:flex и это отработает в 95% без префиксов и старых вариаций, тогда можно засучить рукава...

А пока, что комфортно этим пользоваться, нужен или POST или перепроцессор, чтоб не набивать ручками, эти ленты стилей...

[Igor Schnaider]

Моё ИМХО, еще пока рано

 

Да нормально уже все.

[abrahadabra]

… когда я напишу просто display:flex и это отработает в 95% без префиксов и старых вариаций …

 

а я так и пишу, просто display: flex, и отрабатывает в 100% перечисленных в ТЗ браузеров. Что я делаю не так?