SnowSilver

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

Recommended Posts

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

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

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

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

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

Share this post


Link to post
Share on other sites
4 часа назад, alejandro13 сказал:

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

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

Edited by DevChristmas

Share this post


Link to post
Share on other sites
13 часа назад, SnowSilver сказал:

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

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

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

__________________________________________________________________________________________________________________________________

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

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

Edited by nightgremlin

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

_______________________________________________________________________________

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

Edited by nightgremlin

Share this post


Link to post
Share on other sites
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 by DevChristmas

Share this post


Link to post
Share on other sites
24 минуты назад, DevChristmas сказал:

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

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

height:100px;

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

Edited by nightgremlin

Share this post


Link to post
Share on other sites

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

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

Edited by nightgremlin

Share this post


Link to post
Share on other sites

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

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

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

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

 

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

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

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

5a15819ded8d3_2.thumb.png.18360b63d4273309550c41c04ad13391.png

 

заготовочка 

 

Edited by SnowSilver

Share this post


Link to post
Share on other sites
В 26.09.2017 в 14:13, nightgremlin сказал:

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

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

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

Share this post


Link to post
Share on other sites

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

 

Edited by alanreid

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,330
    Total Members
    3,128
    Most Online
    TimofejUS
    Newest Member
    TimofejUS
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.