Can't set page to 100% height / Page content is wrapped in `div` without 'width' and 'height' set to '100%'
The following HTML source:
<section>
TEST
</section
...generated the following:
<div class="pagedjs_area">
<div class="pagedjs_page_content" style="column-width: 602px; column-gap: calc(var(--pagedjs-margin-right) + var(--pagedjs-margin-left));">
<div>
<section data-ref="eff85fc9-4f69-481f-977f-437001bfd274" data-split-to="eff85fc9-4f69-481f-977f-437001bfd274" data-split-original="true" data-last-split-element="true" data-align-last-split-element="auto">TEST</section>
</div>
</div>
</div>
As you can see, the 'section' element is wrapped in an additional 'div' element.
The problem is, that the width and height of this div isn't set to 100%.
This prevents page content from occupying the full height of the page (which is, for example, desirable on cover pages).
My workaround (for others, who encounter this problem), for now, is as follows:
.my-named-page {
page: my-named-page;
page-break-after: always;
width: var(--pagedjs-pagebox-width);
height: var(--pagedjs-pagebox-height);
}
/* This should also work */
@page {
page-break-after: always;
width: var(--pagedjs-pagebox-width);
height: var(--pagedjs-pagebox-height);
}
My first attempt for a workaround – and why I'm referring to the div without height and width – was adding the following CSS to my stylesheet:
.pagedjs_page_content > div:only-child {
height: 100%;
width: 100%;
}
But for some reason, this isn't actually working!
I have checked the whole element tree, and every parent element of '.pagedjs_page_content' has either a height defined that's 100%, or has a height of --pagedjs-pagebox-height
– so this should work, I believe.
Can someone tell me, why it doesn't?
Yesterday, I ran into some problems, when I used height: var(--pagedjs-pagebox-height)
, so I'd prefer my first attempt to somehow work. So far, the problem doesn't happen again, so maybe the other issue, I've reported, was the reason.