将边距应用于运行 CSS 位置答案

【问题标题】：Apply margin to running CSS position将边距应用于运行 CSS 位置
【发布时间】：2011-11-04 15:00:23
【问题描述】：

我使用以下 CSS 代码将页脚放置在页面底部：

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

有没有办法把它显示得稍微高一点？添加margin-bottom: 50px似乎没有效果。

更新：页面将使用 iText 转换为 PDF

【问题讨论】：

标签： itext footer css

【解决方案1】：

我终于设法让它与以下 CSS 一起工作：

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

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

以前，我只尝试在@bottom-center 和#footer 中添加margin-bottom。

【讨论】：

【解决方案2】：

为此，您通常使用：

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

jsFiddle example

【讨论】：

感谢您的建议，但是当我导出为 PDF (iText) 时它无法正确呈现。
这是一个打印问题，作者提供了大量的例子来澄清这一点