<html>
  <head>
    <title>A4 Page Using CSS</title>
    <link rel="stylesheet" type="text/css" href="print.css">
  </head>
  <style>
  body {
  width: 230mm;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  font-size: 12pt;
  background: rgb(204,204,204); 
}
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.main-page {
  width: 210mm;
  min-height: 297mm;
  margin: 10mm auto;
  background: white;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
.sub-page {
  padding: 1cm;
  height: 297mm;
}
@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;        
  }
  .main-page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

/*Personal Code*/

.header{background:gray; width:100%; height:200px;}





  </style>
  <body>
    <div class="main-page">
      <div class="sub-page">
        <div class="header">
            This Is Header
        </div>
        <div class="content">
            This Is Content
        </div>
        <div class="footer">
            This Is Footer
        </div>
      </div>    
    </div>
  </body>
</html>