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?

score 17 · Answer 1 · edited May 23 '17 at 12:18

17

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.

edited May 23 '17 at 12:18

Community

answered May 02 '15 at 08:58

R. Schreurs

1

This will repeat the div on every page I think. – Jamshaid K. Aug 26 '20 at 00:38
@JamshaidK., yes, I mentioned that. – R. Schreurs Sep 09 '22 at 07:50
how to print for last page and bottom only ?? – Abhishek Srivastava Mar 09 '23 at 11:24
@AbhishekSrivastava that would be another question and you could search for an answer to it. E.g. [Print table footer at the very bottom on last page](https://stackoverflow.com/q/33448846/456456). – R. Schreurs Mar 10 '23 at 10:14

score 9 · Answer 2 · answered Apr 04 '18 at 12:14

9

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;
     }
}

answered Apr 04 '18 at 12:14

MB_18

score 0 · Answer 3 · answered Oct 12 '13 at 10:50

0

Change postion to absolute:

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

(And remove these margins for best results)

answered Oct 12 '13 at 10:50

idmean

3 Answers3