Cannot work in Chrome when I print it.

I want to write a div for each print page. So I made the div height 100%. It usually works well in every browser. But when I print this page, it does not work in Chrome.

<!DOCTYPE HTL> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex"> <meta http-equiv="cache-control" content="no-cache"> <title>Brove.NET ISO Yazılımı</title> <style> html,body{ padding:0; margin:0; height:100%; width:100%; } .sayfa{ height: 100%; width: 768px; } </style> </head> <body> <div class="sayfa" style="background-color:#666666">fds</div> <div class="sayfa" style="background-color:#cccccc">fds</div> <div class="sayfa" style="background-color:#aaaaaa">fds</div> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> </body> </html> 
+4
source share
4 answers

This decision, man ...

Try using this code.

 @media print and (-webkit-min-device-pixel-ratio:0) { .sayfa{ height: 1101px; width: 768px; } } 
+3
source

Set the width and height of your html and body elements to 100%:

 <style> html { width: 100%; height: 100%; } body { width: 100%; height: 100%; } </style> 
+1
source

This CSS / Chrome issue went here:

100% height in chrome

Hope this helps.

0
source

I can not find documentation about this error, but it is definitely a mistake, no doubt.

Your code will be perfectly implemented in browsers other than Webkit (I assume that Safari does the same) and displays well on the screen, and then goes to the magic jar of failure when you click on print, right? What kind of guy to do?

Answer, give the HTML and BODY tags a certain height in the "actual" dimension, not percentages:

 html, body { margin: 0; padding: 0; /* etc */ height: 880px; } div.sayfa { height: 33%; } 

Pages print the same from Firefox 14 and Chrome 19+ using the styles above.

My experiments gave a printed page with a height of 880 pixels for the printer that we used, your mileage will probably be different. EMs work too, but it caused too many headaches, so I believe that the final pixel value will work best.

This is a dirty workaround, but at least it really works.

0
source

Source: https://habr.com/ru/post/1390636/


All Articles