无限长度的div [英] Unlimited length of div
问题描述
我的html喜欢
< div class =d-flex>
< div class =left-part bgcolor-blue>。 ..< / div>
< div class =right-part bgcolor-white> ...< / div>
< / div> ;
i使用wkhtmltopdf库
i希望将html转换为pdf，
但是我的HTML不适合所有的pdf页面，
最后一页保持半空，
所以，左边的部分是蓝色是停在PDF的半页pdf所在的地方完成pdf。
但是我想延长到pdf页面没有结束。
意味着给左边部分无限高度。
我尝试过：
i已经给了
padding-bottom：1346px
到正确的部分，以便html范围正好是一页pdf作为黑页。
它将扩展到我的左边部分也是。
所以当我们打印pdf剩余的空页面不打印时，
但这不是正确的解决方案。
所以我必须做什么？
my html like
<div class="d-flex">
<div class="left-part bgcolor-blue">...</div>
<div class="right-part bgcolor-white">...</div>
</div>
i have use wkhtmltopdf library
i want to convert html into pdf,
but my html not fit to all pdf page,
last page remain half empty,
so,left part which is blue is stop on half page of pdf where html finish into pdf.
but i want to extent till pdf page not end.
means give left part to unlimited height.
What I have tried:
i have give
padding-bottom:1346px
to the right part so that html extent exactly one page of pdf as black page.
it will extent my left part also.
so when we print pdf remaining empty page not be printed,
but this is not proper solution.
so what i have to do?
推荐答案
问题是PDF使用固定页面大小而HTML是浮动格式根据输出窗口的大小呈现内容。
您尚未指定用于生成PDF的方法。但这种一代通常是一种印刷。因此，您可以使用特定于媒体的CSS样式：
The problem is that PDF uses fixed page sizes while HTML is a floating format rendering the content according to the size of the output window.
You have not specified which method you are using to generate the PDF. But such generation is usually a kind of printing. So you can use media specific CSS styles:
<html>
<!-- Usual headers -->
<link rel="stylesheet" type="text/css" media="all" href="css/general.css">
<link rel="stylesheet" type="text/css" media="screen, projection, tv" href="css/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">
<!-- ... -->您现在可以为左右两部分定义样式在屏幕和打印文件中使用不同的设置。
我还没有测试过它（可能取决于它）上您页面的其他内容），但您可以尝试将左右部分的高度设置为100％以进行打印。请注意，这需要将 html 和 body 部分的高度设置为100％：
You can now define your styles for the left and right part in the screen and print files with different settings.
I have not tested it (and it may depend on the other content of your page), but you can try to set the height of the left and right parts to 100% for printing. Note that this requires setting the height of the html and body sections to 100% too:
/* print.css */
html, body {
height: 100%;
}
div.left-part {
background-color: blue;
height: 100%;
}
div.right-part {
background-color: white;
height: 100%;
}如果这不起作用请尝试其他设置。总体而言，使用特定于媒体的样式可以更轻松地格式化一种媒体类型的输出而不会影响其他媒体类型。
但请注意，上述内容也适用于用户打印页面的情况然后会打印出通常不需要的蓝色背景。因此，在打印时禁用某种背景时，通常会使用上述方法。
If this does not work try other settings. Overall using media specific styles makes it much easier to format the output for one media type without affecting others.
But note that the above also when a user is printing your page and would then get a blue background printed what is usually not wanted. Therefore, the above method is often used when having some kind of background to disable that when printing.
这篇关于无限长度的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
