[分享]css3打印会多一页

CSS3是一种用于美化网页样式的技术，可以实现很多炫酷效果，而且还有一项非常有用的功能，那就是打印样式。CSS3的打印样式可以让网页更加美观、易读、专业。但是，许多人在使用CSS3打印时会遇到一些问题...

CSS3是一种用于美化网页样式的技术，可以实现很多炫酷效果，而且还有一项非常有用的功能，那就是打印样式。CSS3的打印样式可以让网页更加美观、易读、专业。但是，许多人在使用CSS3打印时会遇到一些问题，其中之一就是打印时会出现多页的情况。

在普通的网页设计中，我们可以通过设置固定高度、自动换行等方式来避免出现多页的效果。但是在打印样式中，却无法实现这些功能。这是因为在打印时，我们需要考虑到页面大小、打印机的要求等一系列问题。因此，当我们的网页内容很多、超过一页时，就会出现多页打印的情况。

那么，如何解决CSS3打印时出现多页的问题呢？其实，这个问题有两种解决方法：

方法一：

@media print {
    html, body {
        height: 100%;
    }
    .page {
        page-break-after: always;
    }
} 

这段代码的作用是在打印时将页面高度设置为100%，并且在每个需要换页的地方插入一个page-break-after属性。这样一来，我们的网页就可以自动分为多个页面进行打印。

方法二：

@media print {
    html, body {
        height: 100%;
        overflow: hidden;
    }
    .page {
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: auto;
    }
} 

这段代码的做法是将整个网页内容放在一个绝对定位的div内，而且将内容的高度设置为100%。同时，为这个div添加scrollbar属性，这样就可以在页面内容超出屏幕时出现滚动条。这种方法的好处是可以自定义页面的背景色、水印等效果。

总结来说，CSS3的打印样式虽然功能强大，但也需要我们仔细处理。在处理多页问题时，我们可以通过方法一和方法二进行解决，具体选择哪种方法，视具体情况而定。