• Locked
No replies
Wed, 2017-02-22 17:33
ccote
ccote's picture
Offline
newbie
Last seen: 5 years 48 weeks ago
Timezone: GMT-5
Joined: 2017-02-16
Posts: 3
Points: 6

I am trying to create a web page that contains multiple pages of data and will print with a special footer. I've created 2 divs (content and printFooter), within the page and created a separate print stylesheet. I have been trying to change the bottom margin of the content div so that the footer div, which uses a fixed position, won't overlap the contents. However, when I preview the printed version, the footer still overlaps the content text.
Here is a look at how I have my page set up:

<style type="text/css" media="print">
	@page {
		size: auto;
		margin-bottom: 3cm;
	}
 
	#content {
		margin-bottom: 75px;
	}
	#printFooter {
		display: block;
		position: fixed;
		text-align: center;
		bottom: 0;
		width: 98%;
		margin: 0 auto 0 auto;
		border: 0;
		margin-top: -50px;
	}
</style>
 
<body>
     <div id="content">
           multiple pages worth of text containing tables of data.
     </div>
     <div id="printFooter">For Official Use Only (FOUO)
     </div>
</body>

I am using IE 11, so I'm not sure if this is an IE issue or a problem with my code. I have tried a number of things including changing the margins and changing the position attribute of the footer. If I change the bottom margin of the page, all this does is make it display less data per page, but the footer still appears over the last line of text. If I change the position attribute to absolute, then the footer only displays on the last page when I want it on all pages.
This issue has been bugging me for many days now and I am no closer to a solution as when I started. I hope that someone has worked with print CSS and can help me with this.

Top
Tags: