СSS свойство пагинации, зависящее от другого элемента страницы

Question

Есть пагинация на сайте

Каким образом расположить пагинацию, чтобы она примыкала к нижней границе объемлющего элемента? Т.е. в css-свойствах пагинации

#pagination {
    display: flex;
    padding: 0;
    margin-bottom: 0;
    list-style-type: none;
}

#pagination li {
    margin-right: 5px;
    padding: 10px;
    border: 1px solid black;
}

#pagination li:hover, #pagination li.active {
    cursor: pointer;
    color: red;
    border: 1px solid red;
}

в #pagination в свойстве margin-top: должно быть $('.centerarea').height - totalblockheight - heightunderpagination - paginationheight, где totalblockheight - суммарная высота блоков - карточек товаров, расположенных над пагинацией, heightunderpagination - высота под пагинацией, $('.centerarea').height - высота объемлющего блока, paginationheight - высота самой пагинации. Каким образом в css-файле можно задать свойство margin-top элемента #pagination (кроме динамического задания свойства в js через атрибут style)?

Answer 1

Используйте flex Должна быть такая структура примерно

<div class="wrapper">
  <div class="products">
  </div>
  <div class="pagination">
  </div>
</div>

И такие стили

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

БЛОГ НА HUSL

СSS свойство пагинации, зависящее от другого элемента страницы

Ответы (1 шт):