Printing Page size in A4 using CSS Paged media

When ever you are sizing a div in your HTML page you size it with width and height in style sheet. Suppose whenever you have to print that div into A4 page size will it work properly? Not necessary it will print in the same size. So what to do? Simple put the div size into A4. But question is HOW? Let me clarify you.

Create a new HTML page and write create a div within body.

    

        
Page 1
    
    
    

        
Page 2
    
    
    

        
Page 3
    
    
    

        
Page 4
    
    

Now check the CSS once.

    body {
        margin: 0;
        padding: 0;
        background-color: #FAFAFA;
        font: 12pt;
    }
    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    .page {
        width: 21cm;
        min-height: 29.7cm;
        padding: 2cm;
        margin: 1cm auto;
        border: 1px #000 solid;
        border-radius: 5px;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }
    .subpage {
        padding: 1cm;
        border: 5px black solid;
        height: 237mm;
        outline: 2cm #000 solid;
    }
    
    @page {
        size: A4;
        margin: 0;
    }
    @media print {
        .page {
            margin: 0;
            border: initial;
            border-radius: initial;
            width: initial;
            min-height: initial;
            box-shadow: initial;
            background: initial;
            page-break-after: always;
        }
    }

View your page into browser and press Ctrl + P to check whether its diving the page according the size of A4 or not. I am sure it will work 100%.