添加页脚以打印网页并设置页边距

发布于 2024-12-04 17:51:27 字数 491 浏览 1 评论 0原文

我想向 HTML 页面添加页脚，打印时该页脚将在所有页面上重复。我已经成功地通过这段代码实现了这一点：

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

但现在我有一个问题，这个段落位于副本的其余部分之上在此处输入图像描述

根据此 Mirosoft 文章，这应该对我有用：

@page :first {
    margin-bottom: 4in;
}

但它没有，它没有改变有什么...有什么想法吗？

原文

I want to add a footer to an HTML page that will be repeated across all pages WHEN PRINTING. I have managed to achieve this through this code:

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

But now I have a problem with this paragraph going on top of the rest of the copy
enter image description here

According this Mirosoft article, this should work for me:

@page :first {
    margin-bottom: 4in;
}

But it doesn't, it doesn't change anything... any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

划一舟意中人 2024-12-11 17:51:27

这是有效的解决方案，CSS 是这样的：

@media print {
    p.note {
        display:block;
        bottom:0;
        position:fixed;
        font-size:11px;
    }
}

并且所有内容都需要包含在带有此 CSS 的单独 div 中，

#wrapper {
    position:relative;
    bottom:1in;
    margin-top:1in;
    width:974px;
    margin:0 auto;
}

这非常有效！

Here's the solution that worked, CSS is this:

@media print {
    p.note {
        display:block;
        bottom:0;
        position:fixed;
        font-size:11px;
    }
}

And everything needs to be contained in a separate div with this CSS

#wrapper {
    position:relative;
    bottom:1in;
    margin-top:1in;
    width:974px;
    margin:0 auto;
}

This worked perfectly!

回复收藏 0 原文

风向决定发型 2024-12-11 17:51:27

添加一些 z-index 怎么样？页脚似乎覆盖了最后一段
也尝试使用

@media print {
    p.note {
        bottom: 0; position: fixed;
margin-top:10px; 
    }
}

How about adding some z-index ? It seems that the footer overrides the last paragraph
Also try to use

@media print {
    p.note {
        bottom: 0; position: fixed;
margin-top:10px; 
    }
}

回复收藏 0 原文

诗笺 2024-12-11 17:51:27

确保主要内容的容器为页脚留出空间。例如，如果您的标记看起来像这样：

<div id="content"><p>Lorem Ipsum Latin et cetera</p></div>
<p class="note">Footer</p>

您需要一些像这样的 css：

#content {margin-bottom:4in}

Make sure that the container for the main content makes room for the footer. For instance, if your markup looks something like this:

<div id="content"><p>Lorem Ipsum Latin et cetera</p></div>
<p class="note">Footer</p>

You'd want some css like this:

#content {margin-bottom:4in}

回复收藏 0 原文

一城柳絮吹成雪 2024-12-11 17:51:27

要为页脚文本创建空间，您可以使用带有 tfoot 的 table。使用tfoot>tr 创建间隔。将页脚文本放置在 div 容器内，该容器的 position:fixed; 为 bottom:0;。

CSS

table {width:100%;}
@media print {
  tfoot>tr {height:20mm;}
  tfoot div {position:fixed;bottom:0;}
}

HTML

<body>
  <table>
    <thead><tr><td>Page header</td></tr></thead>
    <tbody><tr><td>
      <p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
    </td></tr></tbody>
    <tfoot><tr><td><div>Page footer</div></td></tr></tfoot>
  </table>
</body>

To create room for your footer text you can use a table with tfoot. Use tfoot>tr to create a spacer. Place your footer text inside a div container that has position:fixed; to bottom:0;.

CSS

table {width:100%;}
@media print {
  tfoot>tr {height:20mm;}
  tfoot div {position:fixed;bottom:0;}
}

HTML

<body>
  <table>
    <thead><tr><td>Page header</td></tr></thead>
    <tbody><tr><td>
      <p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
    </td></tr></tbody>
    <tfoot><tr><td><div>Page footer</div></td></tr></tfoot>
  </table>
</body>

回复收藏 0 原文

~没有更多了~