Изотоп - Как заполнить всю высоту контейнера - PullRequest
Новая
       22

Изотоп - Как заполнить всю высоту контейнера

0 голосов
/ 06 марта 2020

Я пытаюсь использовать js Библиотеку изотопов для разработки страницы, которая показывает переменное количество элементов / блоков.
Этот набор блоков должен всегда заполнять столбец на всю высоту доступного пространства (давайте скажем, контейнер) независимо от количества предметов - конечно, автоматически изменяя высоту одного предмета.

Я имею в виду: на первом шаге, если мне нужно показать 3 коробки, вертикальное пространство должно быть разделено в 3 равных пространствах. При щелчке в поле я установил другой фильтр для объекта изотопа, и отфильтрованные элементы также должны занимать одно и то же вертикальное пространство.

Нет проблем для запроса на фильтрацию, но у меня проблема с макетом: первый попытка была установить 'vertical' layout-mode , но содержимое не заполняло доступную высоту.

1 Ответ

0 голосов
/ 06 марта 2020

Вы должны исправить это, используя CSS, в частности flexbox. Для получения более подробной информации см. здесь .

Единственное обязательное требование - установить высоту контейнера. 

.container {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  width: 200px; /* For demo purpose */
  background-color: green; /* For demo purpose */
  height: 100px;
}

.box {
  width: 100%;
  background-color: blue; /* For demo purpose */
  border: 1px red solid; /* For demo purpose */
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<hr>
<div class="container">
  <div class="box"></div>
</div>
...