WeasyPrint
WeasyPrint copied to clipboard
100% page height not working as expected
I am trying to replicate a print layout via CSS I've successfully created with Chrome. For each page, I want a containing div
that is 100% height and width of the page, and centers its content vertically and horizontally.
The expected rendered output of the code below should be 4 pages, each with a full-page yellow block and centered text. This is what I see when viewing the HTML in Chrome. When create at PDF with weasyprint, the blocks don't stretch the full height of the page.
Is this a limitation of weasyprint, or should I be crafting my CSS differently to achieve full-page blocks?
Thanks for any guidance!
<style>
@page {
size: letter;
}
.block {
display: flex;
break-after: page;
background-color: yellow;
height: 100%;
border-bottom: 1px solid black;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="block"><p>Block 1</p></div>
<div class="block"><p>Block 2</p></div>
<div class="block"><p>Block 3</p></div>
<div class="block"><p>Block 4</p></div>
</body>
weasyprint output
![Screen Shot 2022-08-02 at 7 19 46 PM](https://user-images.githubusercontent.com/606854/182492583-37569a61-0653-41c6-ab21-03c90e5e8e64.png)
Chrome output
(Chrome supresses the yellow background, but you can see the bottom border)
![Screen Shot 2022-08-02 at 7 24 47 PM](https://user-images.githubusercontent.com/606854/182493029-decea30d-dbf0-4cdc-8ca4-926f56ee22c6.png)
Hi!
Thanks for this bug report.
I don’t think that Chrome is right to do what it does here. The specification says:
[The height property with a percentage value] specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
Here, the containing block is the body
box, and it’s height is not specified. So, the height of your .block
box should be set to auto
, and that’s what WeasyPrint does.
Fortunately, as you know the size of the page, you can just set your height using inches or pixels. You’ll have to do the math (the page height is 11in = 1056px, the page margin is 75px, the body margin is 8px, the bottom border is 1px, that should be 1056 - 2×75 - 2×8 - 1 if you keep the default margin values).
Thank you! It seems like being explicit about page height and width did the trick.
I see that it must be 96px / in based on the 1056px for the page height. Is this a constant defined somewhere? I'm only asking as I'm used to using 72px / in elsewhere.
I see that it must be 96px / in based on the 1056px for the page height. Is this a constant defined somewhere?
Yes, it’s defined in the specification (with a very interesting explanation about what pixels are in CSS).