print-preview

CSS to set A4 paper size

纵饮孤独 提交于 2019-11-26 01:48:14
问题 I need simulate an A4 paper in web and allow to print this page as it is show on browser (Chrome, specifically). I set the element size to 21cm x 29.7cm, but when I send to print (or print preview) it clip my page. See this Live example! body { margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt \"Tahoma\"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 1cm auto; border: 1px #D3D3D3 solid; border-radius: 5px

Using Chrome's Element Inspector in Print Preview Mode?

限于喜欢 提交于 2019-11-26 01:34:38
问题 I am working on developing a website and need to work on the print view. Typically when I have layout issues I use Chrome\'s Element Inspector. However this does not exist in print preview mode. Is there a Chrome plugin or some other way to change your viewing medium within chrome itself, to view a page as a printer would? I suppose it doesn\'t have a be a Chrome specific solution, but that is my primary browser so it would be nice to have an in-browser solution. Right now I\'m focused just

CSS to set A4 paper size

爷,独闯天下 提交于 2019-11-25 23:14:34
I need simulate an A4 paper in web and allow to print this page as it is show on browser (Chrome, specifically). I set the element size to 21cm x 29.7cm, but when I send to print (or print preview) it clip my page. See this Live example ! body { margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt "Tahoma"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 1cm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .subpage { padding: 1cm; border: 5px red