Apply margin to CSS position

Question

I use the following CSS to place the footer at the bottom of the page:

<style type="text/css"> @page { @bottom-center { content: element(footer); } } #footer {position: running(footer);} </style> 

Is there a way to display it just above? Adding margin-bottom: 50px doesn't seem to have an effect.

: The page will be converted to PDF using iText

Answer 1

I finally managed to get it to work with the following CSS:

  <style type="text/css"> @page { margin-bottom: 100px; @bottom-center { content:element(footer); } } #footer { position: running(footer); } </style> 

I used to just try to add margin-bottom to the bottom center of @ and #footer.

Answer 2

To achieve this, you usually use:

 #footer { position: absolute; bottom: 50px; } 

JsFiddle example