BobbyJones BobbyJones - 1 year ago 61
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>



<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;



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




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.