• Locked
No replies
Thu, 2017-02-16 19:50
ccote
ccote's picture
Offline
newbie
Last seen: 6 years 14 weeks ago
Timezone: GMT-5
Joined: 2017-02-16
Posts: 3
Points: 6

I have a page with 2 divs (content and printFooter). The printFooter div I have hidden when viewing on the screen. Then I am trying to set up the footer to display at the bottom of each page when it is printed. The problem I'm having is that the footer is overlapping the content text. I have tried a number of different things from setting the height of the content div to 95% height and setting the min-height using the calc function. No matter what I do, I can't get the main contents of the page to not fill the whole page. I'm hoping someone can help me.
Here is the CSS and basic HTML code from my page. 

@media print {
    #content {
        min-height: 95%;
    }
    #printFooter {
        position: fixed;
        text-align: center;
        bottom: 0;
        margin: 0 auto;
    }
}
 
<body>
    <div id="content">
        blah blah blah blah blah blah blah blah blah blah blah<br /> 
        yada yada yada yada yada yada yada yada yada yada<br />...
        Add text as necessary until it fills a landscape-printed page.
    </div>
    <div id="printFooter">
        For Official Use Only (FOUO)
    </div>
</body>

I have tried so many things I've lost track. I've even tried using the code for a sticky footer I found on the web, but that still wasn't working for me. I hope somebody out there has seen this issue before and knows what to do to fix it. I've never worked with stylesheets for printed content, just for the screen.

Chris

Top
Tags: