Question

I’m using the following CSS code to position my 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 slightly higher? Adding margin-bottom: 50px doesn’t seem to have an effect.

update: the page will be converted to PDF using iText

Answer 1

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

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

    #footer {
      position: running(footer);
    }
</style>

Previously, I only tried to add margin-bottom to the @bottom-center and #footer.