打开控制台，渲染水印，隐藏控制台，水印会存在未覆盖的区域

[wangxingkang]

[Jaylan]

  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

设置绝对定位了，为什么还要设置高度，高度不够导致的吧？

代码

如果是这个，我提交了一个PR #3

[wangxingkang]

设置高度是因为水印区域如果是可滚动时，就会存在覆盖不了的情况， 如下面 示例 https://react-components-vert.vercel.app/components/basic/watermark#%E6%BB%9A%E5%8A%A8%E5%8C%BA%E5%9F%9F

[Jaylan]

早上我遇到的bug，是始终底部有空不没有覆盖的情况；我把height去掉之后，就可以全部覆盖。父级元素添加了 position: relative;

反而是添加height，影响了覆盖；height的值小于实际高度

[wangxingkang]

给个复现

[Jaylan]

抱歉，底部空的，没复现，我继续尝试复现。

但是加上height还有另外一个bug。加上 pageBreakAfter: "always"， 打印分页的，打印时水印高度就不对了。但如果把水印的高度去掉，打印时水印完全覆盖。

示例代码

[Jaylan]

PS：我是在react 中使用的，@pansy/react-watermark

[wangxingkang]

react 封装的组件和这个库的功能是一致的 我排查下

[wangxingkang]

@JaylanChen https://github.com/pansyjs/watermark/tree/fix 使用这个分支 link 下 看是否可以解决

[wangxingkang]

没问题我再发版本

[Jaylan]

还是不行。

我这边是没有设置height， 显示和打印都正常没问题。

[wangxingkang]

你上面的复现 是啥问题了

[Jaylan]

如果设置height，

1. 底部 水印没有覆盖;
   2.打印时(设置了pageBreakAfter: "always")，水印没覆盖的区域更大了，因为pageBreakAfter导致打印分页，高度实际拉大了，但设置的高度没变。

打印的问题，参考此demo： https://codesandbox.io/s/dumi-demo-forked-gmrtm?file=/demo.tsx

然后你把右侧预览，单独标签页打开，打印试一下

[wangxingkang]

好的

[wangxingkang]

@JaylanChen 现在的做法是没有滚动条的时候 不会设置 height ，你的问题应该解决了,使用最新版本 试一试吧

[wangxingkang]

@JaylanChen 在打印时，如果不勾选背景图，就无解，尴尬！

[Jaylan]

@wangxingkang 这次可以的。显示和打印的都没问题。

打印不勾选背景图，那个没办法，那不是JS，CSS能控制的。

[wangxingkang]

水印使用 div 的形式就可以解决，暂时先这样吧，先关闭