I have written some HTML that when converted to a PDF by wkhtmltopdf, creates 2 pages, each with two divs one above the other. I would like the bottom div to stretch to the bottom of each page. I haven't used a separate footer file, because the bottom div on each page needs to be able to contain different content.
I've simplified the HTML as much as possible, as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css" media="screen,print">
body {
margin: 0;
min-height: 100vh;
height:100%;
display: flex;
flex-direction: column;
}
#top {
height: 50px;
background: yellow;
}
#bottom {
background: lightgrey;
flex: 1;
height:100%;
min-height:100%;
}
.break-after {
page-break-after: always;
}
</style>
</head>
<body>
<div id="top"><span>Page 1 header</span></div>
<div id="bottom"><span>Page 1 content area - should extend to the bottom of the page</span></div>
<div class="break-after"></div>
<div id="top"><span>Page 2 header</span></div>
<div id="bottom"><span>Page 2 content area - should extend to the bottom of the page</span></div>
</body>
</html>
Running this HTML through wkhtmltopdf doesn't produce the desired output (see the attached screenshots) I want the light blue div to stretch to the bottom of the page. I'm using version 0.12.6 (with patched qt).
Do you know how to get the bottom div to stretch to the bottom of each page in the pdf output?