Привет, есть такой столбец:
<div>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
Столбец имеет следующие свойства CSS:
{
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between
}
В результате получается столбец section
, который хорошо складывается Поверх друг друга и расположитесь на всю высоту контейнера.
Проблема возникает, когда я хочу напечатать этот столбец в PDF, используя mPDF. Эта библиотека не анализирует flexbox, поэтому требуются фактические нижние поля для section
. Поскольку количество и содержание разделов является динамическим c, я должен рассчитать это на лету.
Использование jQuery $(el).offset().top
или $(el).offsetTop
дает мне верхнюю позицию каждой секции. Я добавляю outerHeight()
, чтобы получить нижнюю позицию, которую я вычитаю из самой верхней позиции следующего раздела, чтобы получить расстояние между ними - нижнее поле.
Однако ни одна из этих функций ($(el).offset().top
или $(el).offsetTop
), по-видимому, не дает правильную позицию, принимая во внимание расстояние от flexbox. Вместо этого секции будут располагаться непосредственно друг под другом или с меньшим полем, чем на экране.
Как я могу получить визуализированную позицию элемента внутри контейнера flexbox?