时间戳

首页 > 解决方案 > 打印时div重叠

html - 打印时div重叠

问题描述

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

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 
}

标签： htmlcss

解决方案

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

推荐阅读