Как растянуть блоки по высоте строки

[SnowSilver]

вот пример на codeopen.iohttps://codepen.io/anon/pen/gGgMWX

Всем ячейкам задана высота 45px. Одной из ячеек задана высота 69px. Строка растянулась по высоте в 69px.

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

height: 100% не будет работать

Мне просто интересно возможно ли как то сделать, не ужели нельзя...

[ShumNo]

Неужели пишется слитно :)

Используйте flex

[alejandro13]

А почему тогда всем ячейкам нельзя задать высоту 69px? 

[DevChristmas]

4 часа назад, alejandro13 сказал:

А почему тогда всем ячейкам нельзя задать высоту 69px? 

Ну во первых он привёл пример , вдруг эта ячейка будет растягиваться динамично , от вывода данных из БД, то высоту предугадать не получится . поэтому как сказал ShumNo используйте флексбокс(FlexBox) , он автоматически растянет высоту ячейки относительно контента.

Edited September 25, 2017 by DevChristmas

[nightgremlin]

13 часа назад, SnowSilver сказал:

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

Вы пытаетесь растянуть ячейки не по родительскому элементу, даже с flex у вас ничего не выйдет. Боюсь в вашем примере поможет только JavaScript.

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

__________________________________________________________________________________________________________________________________

А вот ваш пример с Flex-ом: https://jsfiddle.net/Lgcrrr1t/

Со свойством align-items:stretch;  тоже не поможет так, как браузер считает, что высота строки меньше высоты последней ячейки. 

Edited September 26, 2017 by nightgremlin

[nightgremlin]

Можно сделать вот так: https://jsfiddle.net/4ppf4bc3/

Или так: https://jsfiddle.net/799fypyL/

В общем поиграйтесь со свойствами. Если хорошо JS знаете, то задайте условия при которых бы высота ячеек выравнивалась по высоте последней ячейки.   

[nightgremlin]

Вот решение на JavaScript: https://jsfiddle.net/0eurp72g/

Можете даже теперь свойство height:100% убрать из стилей.

_______________________________________________________________________________

P/s: только что заметил, что за тег dib ? Новый тег?

Edited September 26, 2017 by nightgremlin

[DevChristmas]

5 часов назад, nightgremlin сказал:

Вы пытаетесь растянуть ячейки не по родительскому элементу, даже с flex у вас ничего не выйдет. Боюсь в вашем примере поможет только JavaScript.

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

__________________________________________________________________________________________________________________________________

А вот ваш пример с Flex-ом: https://jsfiddle.net/Lgcrrr1t/

Со свойством align-items:stretch;  тоже не поможет так, как браузер считает, что высота строки меньше высоты последней ячейки. 

Ты не прав , FlexBox растягивает блоки по высоте родительского элемента  и по высоте элемента с большим кол-вом контента внутри.

 

15 часов назад, SnowSilver сказал:

вот пример на codeopen.iohttps://codepen.io/anon/pen/gGgMWX

Всем ячейкам задана высота 45px. Одной из ячеек задана высота 69px. Строка растянулась по высоте в 69px.

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

height: 100% не будет работать

Мне просто интересно возможно ли как то сделать, не ужели нельзя...

Делаешь так : 

.container{
  height:100px;
  display:flex;
  border:1px solid red;
}
.blocks{
  border:1px solid #000;
}

Код проверен , работает!

Edited September 26, 2017 by DevChristmas

[nightgremlin]

24 минуты назад, DevChristmas сказал:

Код проверен , работает!

Если задавать высоту родительскому блоку, тогда работает а если не задавать тогда не работает. В данном примере ты задаешь высоту:

height:100px;

Как раз в этом примере https://jsfiddle.net/xsakqo2v/ и видно что не растягивает, если не задать свойства height родительскому блоку

Edited September 26, 2017 by nightgremlin

[DevChristmas]

Вот пример без высоты родительского контейнера : 

[nightgremlin]

Прикольная штука получилась с Flex   Если для последнего элемента задать другое значение высоты, то оно останется фиксированным. А другие элементы будут растягиваться по родительскому https://jsfiddle.net/Lh843osr/

Может кому будет полезно!

Edited September 26, 2017 by nightgremlin

[SnowSilver]

Как бы вы такое реализовали. Желательно без flex

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

Во втором блоки. когда места не хватает в строке, блок должен переносится на следующую строку. но не залезая в первый столбец! 

По сути там похоже на таблицу из двух ячеек, где во второй ячейки блоки.

 

1. Вообще я изначально задавал радительскому контейнеру padding-left и текст первого столца выводил абсолютным позиционированием. Все бы ничего, но у меня в первом столбце ширина может немного меняться. 

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

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

 

заготовочка 

 

Edited November 22, 2017 by SnowSilver

[Димитрий]

В 26.09.2017 в 14:13, nightgremlin сказал:

Прикольная штука получилась с Flex   Если для последнего элемента задать другое значение высоты, то оно останется фиксированным. А другие элементы будут растягиваться по родительскому https://jsfiddle.net/Lh843osr/

Может кому будет полезно!

Спецификации так и написано... 

[alanreid]

Таблицы оцениваются семантически, только когда в разметке (в html) прописаны. А в стилях (в css) их использовать можно повсеместно.

 

Edited November 22, 2017 by alanreid