Setting html, body height causes margins to result in partial document

oskariuk commented 5 months ago

Setting html and body to height: 100% causes any margins to break the document's page breaks starting from said margin, resulting in a partial document.

The first version with this behavior was v61.0 and it still occurs with the current v62.1.

Example

<!DOCTYPE html>
<html>

<head>
    <style>      
        html, body {
            height: 100%;
        }

        .page {
            break-before: page;
        }
    </style>
</head>

<body>
    <div class="page">
        <div>Page 1</div>
    </div>

    <div class="page">
        <div>Page 2</div>
    </div>

    <div class="page">
        <div>Page 3</div>
    </div>
</body>

</html>

The above input produces a one-page document that only contains the first page with the text Page 1.

If you remove all margins from the document with the following CSS, you get a valid three-page document:

body {
    margin: 0;
}

Then, if you change the div in page 2 to an element with a margin, e.g. p, page 3 disappears:

<div class="page">
    <p>Page 2</p>
</div>

I'm aware that setting html and body heights like this is not necessarily in accordance with print CSS best practices, and not sure how exactly this should behave.

liZe commented 5 months ago

Setting html and body to height: 100% causes any margins to break the document's page breaks starting from said margin, resulting in a partial document.

Hi!

That’s normal: if the body’s height is 100%, it fits on one page and the overflowing content is discarded. I’m not 100% sure about this behavior, it’s obviously the right one for "normal" tags, but maybe there’s a special case in the specification for html and/or body (I didn’t find one yet).

Unless some finds a reason in the specification to change this, we’ll probably won’t change this behavior. Using min-height instead of height can help in some cases.

(It’s maybe related to #2026.)

oskariuk commented 5 months ago

Thank you for the quick reply!

if the body’s height is 100%, it fits on one page and the overflowing content is discarded

That makes sense. What made this difficult for me to debug was the margins pushing content around and making pages disappear.

Using min-height instead of height can help in some cases

Yes, that also helped in my specific case. Please feel free to close this issue if you don't see the need for any changes.

Kozea / WeasyPrint

Setting html, body height causes margins to result in partial document #2168

Example