Unlimited length of div

Question

0.00/5 (No votes)

See more:

my html like
<div class="d-flex">
<div class="left-part bgcolor-blue">...</div>
<div class="right-part bgcolor-white">...</div>
</div>

i have use wkhtmltopdf library

i want to convert html into pdf,
but my html not fit to all pdf page,
last page remain half empty,
so,left part which is blue is stop on half page of pdf where html finish into pdf.
but i want to extent till pdf page not end.
means give left part to unlimited height.

What I have tried:

i have give

padding-bottom:1346px

to the right part so that html extent exactly one page of pdf as black page.
it will extent my left part also.
so when we print pdf remaining empty page not be printed,

but this is not proper solution.
so what i have to do?

Posted 29-May-18 21:13pm

Member 13850628

Updated 30-May-18 3:31am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jochen Arndt · Answer 1 · 2018-05-29T23:33:00

The problem is that PDF uses fixed page sizes while HTML is a floating format rendering the content according to the size of the output window.

You have not specified which method you are using to generate the PDF. But such generation is usually a kind of printing. So you can use media specific CSS styles:

HTML

<html>
<!-- Usual headers -->
<link rel="stylesheet" type="text/css" media="all" href="css/general.css">
<link rel="stylesheet" type="text/css" media="screen, projection, tv" href="css/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">
<!-- ... -->

You can now define your styles for the left and right part in the screen and print files with different settings.

I have not tested it (and it may depend on the other content of your page), but you can try to set the height of the left and right parts to 100% for printing. Note that this requires setting the height of the html and body sections to 100% too:

CSS

/* print.css */
html, body {
    height: 100%;
}
div.left-part {
    background-color: blue;
    height: 100%;
}
div.right-part {
    background-color: white;
    height: 100%;
}

If this does not work try other settings. Overall using media specific styles makes it much easier to format the output for one media type without affecting others.

But note that the above also when a user is printing your page and would then get a blue background printed what is usually not wanted. Therefore, the above method is often used when having some kind of background to disable that when printing.