Footer does not stick at the bottom of the page

1

Hi, i just updated to the latest w11 desktop version and played arround with theme enhancer. I can’t seem to figure out how to make a fixed footer (for company info). Every time i generate a PDF or print the page the footer shows up halfway.

2

Try running Print from the browser. Maybe your footer script can work well there.

We can create a Header or Footer with a fixed position using CSS.
This CSS works well in the browser but is not compatible with the desktop version of Manager.

image
image690×357 37.6 KB

<style>
		/* PAGE SETUP - Controls print layout and margins */
		@page {
            size: A4;
            margin: 15mm 20mm 20mm 20mm;
            
            /* Header berulang di setiap halaman */
            @top-left {
                content: "My Company Name";
                font-family: 'Arial', sans-serif;
                font-size: 10px;
                color: #666;
                font-weight: bold;
            }
            
            @top-right {
                content: "Invoice #" attr(data-invoice-number);
                font-family: 'Arial', sans-serif;
                font-size: 10px;
                color: #666;
            }
            
            /* Footer berulang di setiap halaman */
            @bottom-left {
                content: "Thank you for your business! | Email: billing@company.com";
                font-family: 'Arial', sans-serif;
                font-size: 9px;
                color: #666;
            }
            
            @bottom-right {
                content: "Page " counter(page) " of " counter(pages);
                font-family: 'Arial', sans-serif;
                font-size: 9px;
                color: #666;
            }
        }
3

That’s interesting. I was having the same problem but gave up and just accepted a mid-page footer at times.

4

You can try this,

<!DOCTYPE html>
<html>
    <style>
    /* Set page size to 210mm (width) x 297mm (height) */
    @page { size: 210mm 297mm; margin:0 }
    html, body {
        height: 297mm;
        margin: 0;
        background-color: #F8F8F8;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 12px;
    }
  
    .something {
        text-align: center;
        font-size: 20pt;
        background-color: #E8E8E8; 
        padding: 40px;
        height: 60px;
    }
      
    /* FOOTER */
    .footer {
        position: absolute;
        bottom: 5mm;
        left: 45px;
        right: 45px;
        text-align: center;
        font-size: 10pt;
        border: 1px solid #000;
        padding-top: 15px;
        padding-bottom: 15px;
        background-color: #E8E8E8;
    }
    </style>
    <body>
        <div class="something">Testing 123</div>
        
        
        <!-- FOOTER -->
        <div class="footer">
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin<br>
            looked up one of the more Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia<br>
            obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in 
        </div>
    </body>
</html>
2 Likes
5

I used Theme enhancer…see other post re footers

6

Didn’t work for me.