Question

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

HTML如下

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

CSS如下

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 
}

Answer 1

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

打印时Div重叠

1 个答案: