1

I tried to set margin-top during printing preview (chrome browser) to a minimum size that could remove page header text (date time, url), but at any size, the header won't be removed.

I have one html file iframe.html that is an iframe referent to another html file print.html which contain printing button.

iframe.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <iframe src="print.html" frameborder="0"></iframe>
        </div>
    </div>
</body>
</html>

print.html is a page I would to print its content, and want to remove header text.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!-- Include BS and FA -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        @media print {
            @page {
                margin-top:0.5cm;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <p>Hello Please press button print to preview</p>
            <button>Print</button>
        </div>
    </div>
    <script>
        $(document).ready(function(){
            $('button').click(function(){
                window.print();
            })
        })
    </script>
</body>
</html>

In print.html, I set margin-top of @page to a minimum size 0.5cm I supposed it to removed header page, yet on print preview the content of print.html overlaps the header text.

Here it looks like on print preview:

enter image description here

I wonder if there's any css hack I would remove page header print preview during printing, currently I'm using chrome browser.

Edited

The suggested answer above does not apply to my current problem as I tested solution from there already. The difference is I am print page from iframe rather from page alone. If I run file print.html alone the magin-top style could remove page header fine, however the problem is when press print button from Iframe, that does not work.

Houy Narun
  • 1,557
  • 5
  • 37
  • 86
  • I guess the headers and footers is up to the user to opt in/out. Hence the option you see at the left [x] Headers and footers – a--m Mar 29 '18 at 13:00
  • Possible duplicate of [Disabling browser print options (headers, footers, margins) from page?](https://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page) – a--m Mar 29 '18 at 13:03
  • @a--m, yeah Chrome provide user an option to toggle both header and footer, yet I would to remove only header. One more, If I run print.html file alone, margint-top:0.5cm would remove header page. – Houy Narun Mar 29 '18 at 13:04
  • @a--m, thanks for suggesting referent answer, yet it does not match with my current problem for that I use print from iframe instead of from page alone. Thanks. – Houy Narun Mar 29 '18 at 13:06

0 Answers0