Jump to content
  • 0

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


Vlad_P
 Share

Question

http://vladp.esy.es/

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

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

 

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

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

Link to comment
Share on other sites

  • 0

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

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

 

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

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

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

Link to comment
Share on other sites

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

Нет :-)

 

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

 

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

 

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

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

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

 

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

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

nt5Z1zg.gif

 

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

 

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

 

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

 

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

 

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

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

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

 

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

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

nt5Z1zg.gif

 

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

 

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

 

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

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

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

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

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

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

 

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

 

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

 

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

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

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

 

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

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

nt5Z1zg.gif

 

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

 

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

 

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

Link to comment
Share on other sites

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

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

 

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

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

 

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

Не понял...

 

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

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

Link to comment
Share on other sites

  • 0

 

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

 

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

 

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

 


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


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

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy