how to align element to bottom of page in print preview

Question

i am trying to align the element of my html page, using css.

I have aligned the element to bottom of page, but when i see the page in print preview. the element is not appearing at bottom

i am using this css to align element to bottom

code:

.bel {
    position:relative;
    margin-left: 38%;
    margin-right: 38%;
    bottom:-25pc;
}

html code:

<span class="bel">Text 1</span>

but this is not working...How can i solve this?

Answer 1

To print an element at the bottom of the page, you should define some style rules for print. Here is the code:

@media print{
 .bel{
     position:fixed;
     bottom:0;
     }
}

Answer 2

I found a useful answer in: How to use HTML to print header and footer on every printed page?:

div.divFooter {
    position: fixed;
    bottom: 0;
}

So, do not use absolute, as @idmean suggested, but fixed. As a bonus, the footer will appear on each printed page.