HTML CSS PRINT영역

여러가지 테스트해봤는데

해당 경우가 제일 잘작동 하였다.

http://jsfiddle.net/destan/e9gjwodL/

--

HTML

<div class="book">

    <div class="page">

        <div class="subpage">Page 1/2</div>    

    </div>

    <div class="page">

        <div class="subpage">Page 2/2</div>    

    </div>

</div>

CSS

    body {

        width: 100%;

        height: 100%;

        margin: 0;

        padding: 0;

        background-color: #FAFAFA;

        font: 12pt "Tahoma";

    }

    * {

        box-sizing: border-box;

        -moz-box-sizing: border-box;

    }

    .page {

        width: 210mm;

        min-height: 297mm;

        padding: 20mm;

        margin: 10mm 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 solid;

        height: 257mm;

        outline: 2cm #FFEAEA solid;

    }

    

    @page {

        size: A4;

        margin: 0;

    }

    @media print {

        html, body {

            width: 210mm;

            height: 297mm;        

        }

        .page {

            margin: 0;

            border: initial;

            border-radius: initial;

            width: initial;

            min-height: initial;

            box-shadow: initial;

            background: initial;

            page-break-after: always;

        }

    }

JS

window.print();

//http://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size