BobbyJones BobbyJones - 6 months ago 28
HTML Question

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>

Answer

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.

Comments