21

My headers often clip content so that the content below it is not completely visible, it appears as though the page continues underneath the header before the header ends and as a result, not all of the content is shown.

Image demonstrating the problem, content is shown below the header

Is there a CSS rule I can use for this? Or a cmd argument for wkhtmltopdf? Or any other way?

Joel Peltonen
  • 13,025
  • 6
  • 64
  • 100
  • @vdboor's solution whould be chosen as "the" solution! – Xavi Montero Dec 01 '17 at 02:26
  • @XaviMontero I asked Meta about this and they agree with me, the accepted solution will stay on my solution as the doctype was not the problem in my case. https://meta.stackoverflow.com/questions/360184/ – Joel Peltonen Dec 04 '17 at 15:29
  • I will respect your decission, of course. Nevertheless I wonder if you have actually tried the ` ` solution, eliminating any need to play with margins and other things like those; or just directly skipped to test that solution as yours already worked. Testing that solution also means clearing weird CSS things one might previoulsy had. You own the question, you own your choose of the anwer. [continues] – Xavi Montero Dec 05 '17 at 13:22
  • [continuation] To my eyes, the doctype is neat and "pure", while anything playing with css always has the risk to break if one pixel goes here or there in the canvas size. But if you feel the `!doctype` does not solve your issue, it's okey. I had exactly your problem, and that solution exactly worked for me, and it's simply "pure", no hacks. Your question, you choose the answer; of course. – Xavi Montero Dec 05 '17 at 13:23
  • @XaviMontero yeah all of my content already had that :) – Joel Peltonen Dec 08 '17 at 10:01

6 Answers6

27

I have learned that this is actually a known issue and is unlikely to be changed in a while. The workaround is to use style="margin:0; padding:0;" in the header <body> element. Another workaround would be to experiment with the --header-spacing n parameter. Yet another way is to wrap all top-page elements and add margin there, but that is a very bad an non-dynamic idea.

For for further information see:

http://code.google.com/p/wkhtmltopdf/issues/detail?id=182 (duplicate of this issue) http://code.google.com/p/wkhtmltopdf/issues/detail?id=175 (the origins of this issue) http://code.google.com/p/wkhtmltopdf/issues/detail?id=523 (header-spacing workaround)

Joel Peltonen
  • 13,025
  • 6
  • 64
  • 100
  • 1
    Wrap your content in a container `
    ` after setting body to 0 padding and margin. Then you can apply any desired padding to the container div. Works great. Only other issue I have with headers is that the document margins seem to impact their positioning. For example, if you set the document top margin to 0, the header will not be visible. I haven't found a good work around for this.
     – crush Jun 11 '15 at 17:49
  • 1
    Setting `style="margin:0; padding:0;"` on `body` tag worked like charm for me! :) – abhishek77in Jul 19 '18 at 16:35
  • Here, just setting `margin: 0; padding: 1rem` worked without overlapping content, with wkhtmltopdf 0.12.0 and 0.12.4. – GuyPaddock Feb 16 '20 at 22:08
  • Setting the --header-spacing parameter worked for me. – Ernesto Ruiz Feb 24 '23 at 22:14
12

Worked for me with <body style='height:50px;overflow:hidden;margin:0;padding:0;'> in the header and footer and the --header-spacing 30 -T 45mm parameters.

Tudor Timi
  • 7,453
  • 1
  • 24
  • 53
user3536077
  • 121
  • 1
  • 2
  • In my case I've started with header having only one div overlapping the page content as described in the question. But I had additionally OPACITY on the div. When I started to play with the answer for some reason any opacity made the element vanish. I realized this only after several hours of struggle. Apparently there are several bugs :( Be cautious with that. – alehro Jan 14 '16 at 14:59
  • 1
    where to put this -header-spacing 30 -T 45mm ? – aldrien.h Jul 12 '16 at 08:35
  • I also found this solution: fix height of body and html element. – caiofior Feb 12 '19 at 09:22
4

Make sure you have <!doctype html> at the start of your header/footer page. Webkit renders the page in quirksmode otherwise.

vdboor
  • 21,914
  • 12
  • 83
  • 96
  • This solved me the issue I asked here: https://stackoverflow.com/questions/47583622/how-do-i-set-header-and-footer-in-a-pdf-from-html-with-knp-snappy-bundle/47585752#47585752 – Xavi Montero Dec 01 '17 at 02:26
4

This worked for me

thead {
    display: table-header-group;
}
tfoot {
    display: table-row-group;
}
tr {
    page-break-inside: avoid;
}
linktoahref
  • 7,812
  • 3
  • 29
  • 51
Amrit Shrestha
  • 1,620
  • 20
  • 25
1

this worked for me

--header-spacing XX -T XXmm

XX should be the same value eq: --header-spacing 20 -T 20mm

bonzi
  • 31
  • 3
1

I found the solution: I created a bash script who isolates the header in a HTML file then inject it with --header-html

Edit: Assume that your header is in thead tag 

filename="x.html"

begin=`awk '/<thead>/{ print NR; exit }' $filename` 
end=`awk '/<\/thead>/{ print NR; exit }' $filename`

echo "<DOCTYPE! html>" > $filename".head.html"
cat $filename | head -$end | tail -n +$begin | sed -e "s/.*<thead>/<thead>/g" | sed -e "s/<\/thead>.*/<\/thead>/g" >> $filename".head.html"

#You can do the same for tfoot

wkhtmltopdf --header-html $filename".head.html" $filename output.pdf

it works also for tfoot or in the case of the header and the footer are in header tag . you also need to make a style tag in the original document to say that display is none . ( you can add this by a script )

Sami Fakhfakh
  • 89
  • 2
  • 17