Html 打印时Div重叠_Html_Css - Fatal编程技术网

Html 打印时Div重叠

html css

Html 打印时Div重叠,html,css,Html,Css,当我打印以下代码时，绿色的页脚与黄色的容器重叠。我需要黄色中断，并转到下一页时，页脚遇到打印 HTML如下 <body> <div class="container"> This is the container </div> <div class="footer"> This is the footer </div> </body> body{

当我打印以下代码时，绿色的页脚与黄色的容器重叠。我需要黄色中断，并转到下一页时，页脚遇到打印

HTML如下

<body>
    <div class="container">
            This is the container
    </div>
    <div class="footer">
        This is the footer
    </div>
</body>

body{
    height: 100vh;
    margin: 0;
    -webkit-print-color-adjust:exact;
}

.container{
    background-color:yellow;
    width: 100%;
    height: 1500px;

}

.footer{
    position: fixed;
    bottom: 0;
    width: 80%;
    height: 100px;
    background-color: #21f50056 
}

最后使用javascript，在添加任何元素之前，我检查容器的高度。如果高度超过页面高度，请插入分页符。

因为页脚的位置是固定的，所以页脚会从文档流中取出，但它是相对于视口的。这两个（页脚和黄色div）之间没有关系，就像它们在两个单独的文档中一样，

bottom:0

表示页脚的底边和视口的底边之间没有空间，因此它将粘在视口的边缘上（浏览器窗口表示第一页）如果你设置顶部：100%它将只使用页脚的上边缘与底部相同，你最好的办法是将其顶部设置为与集装箱高度相同的1500px。我需要页脚在每页上重复，因此位置必须固定。我基本上需要的内容，我放在容器不应该得到隐藏的页脚。如果有某种方法可以指定打印页底部的页边距。。。