csshtmlprintingcss-paged-media

CSS Paged Media, div page breaks onto next page

I need your help,

I can't seem to figure out as to why the div (bottom border) breaks onto the next page when a print preview is done in internet explorer 11:

Either way, if it can done properly, or via another method, id ideally like to get a 1px border around the page (letter-sized, 8.5inches x 11.0inches) with some margins.

enter image description here enter image description here

Here is the HTML and CSS markup in question:

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
@page {
    margin: 0.25in;
}
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.table td {
    padding: 0;
}
</style>

</head>

<body>


<div style="border:1px solid grey; height: 100%;">
<table class="table" cellspacing="0" cellpadding="0">
    <tr>
        <td>File Number:</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</div>


</body>

</html>
Solution

  • The problem has to do with the CSS box model. By default, borders are added to the outside of the width/height, so you need to change the box-sizing to border box, which puts the borders on the inside of the width/height:

    <div style="border:1px solid grey; height: 100%; box-sizing: border-box">...

    If you don't change it to border-box, the div will have a height of 100% + 2px (1px for top border, 1px for bottom border) which causes the overflow to a second page.