HTML footer overlapping body content

HTML-CSS
1

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 in website. 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 webpage to not fill the whole page. I’m hoping someone can help me.
Here is the CSS and basic HTML code from my web 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

2

Have you tried it with flex?

display: flex;
align-content: flex-end;

3

I don’t have a lot of experience with print queries, but wouldn’t you want content to be max-height 95% in print, not min-height? Thereby leaving space for the footer?

Alternatively you could have the media query add padding to the bottom of the content when being printed so there is no overlap