新页面上的html/css图像与上一页重叠，而不是按下以适合自己的页面
新页面上的html/css图像与上一页重叠，而不是按下以适合自己的页面
提问于 2018-05-28 19:18:45
当涉及到html/css时，总新手在这里。我正在做一个Android项目，在这个项目中，我需要动态地修改一些已经给出的HTML，然后将其输出为PDF .
我有一些条款和条件，然后签名出现在下一页。
我有所有的工作，除了当签名是高的，他们是重叠到上一页，而不是按下当前的页面，以容纳更大的大小。
如果我设置高度而不是宽度，它将防止上面的页面重叠，但是一个长签名将超出签名行，进入日期部分。
如果我设定一个宽度和高度，图像就会失真。
我不知道如何保持图像的尺寸，除非它能够上升到高，或长或变得扭曲。
我已经玩了很长一段时间的宽度和高度，并且不知道如何解决这个问题。
https://jsfiddle.net/yrfomjrm/1/
注意-在jsfiddle链接上，签名行被转移到.我不知道为什么它看起来像那样，在我的电脑上它看起来很好，当我打印PDF的时候它看起来也很好？
我不会介意签名将整个页面向下推到合适的位置，或者它知道根据宽度或高度调整大小，并保持尺寸并相应地缩小。
@media print { .pagebreak { page-break-before: always; } }
h1, h2 { text-align: center; }
h2, h3 { margin-top: 3em; }
body, p, h1, h2, h3 { font-family: Helvetica; }
.col-1-3 { width: 33.3%; float: left; padding-right: 20px; }
.sigbox { position: relative; height: 100px; max-height:100px; display: inline-block; bottom: 10px }
.inbox { position: relative; top: 100%; transform: translateY(-100%); -webkit-transform: translateY(-100%); }
.grid:after { content: ; display: table; clear: both; }
.border { -webkit-box-sizing: border-box; box-sizing: border-box; } <html>
<head>
</head>
<body>
<div class='header'></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus felis eros, ullamcorper a sodales et, hendrerit sed neque. Aliquam porta felis at dolor placerat, eget fringilla ipsum faucibus. Maecenas tortor turpis, bibendum non molestie vulputate, lobortis sodales est. Aenean nec nisl rutrum, interdum enim eget, tincidunt justo. Fusce ac hendrerit nisi, sed interdum lectus. Aenean magna enim, consectetur ut nibh vitae, volutpat facilisis quam. Cras metus leo, euismod id orci et, dictum dignissim augue. Mauris id congue dolor. Quisque sit amet mauris in eros imperdiet pharetra. Aliquam lobortis ante ut mauris tincidunt dictum. Suspendisse nisi purus, vulputate rutrum tincidunt id, bibendum vitae ante. Proin et tellus metus. In in nulla ullamcorper, ornare purus a, tincidunt elit. Vivamus eget hendrerit sem. Morbi vitae ligula a metus consectetur sagittis.
Vivamus aliquam molestie nunc, vitae tempor purus dignissim non. Phasellus maximus est ipsum, a dictum quam pharetra id. Mauris ante erat, interdum a massa quis, semper dictum leo. Aliquam convallis tincidunt placerat. Cras ultricies ante et auctor rutrum. Fusce consequat rutrum urna. Quisque vitae hendrerit arcu. In porta suscipit purus, id posuere nisl cursus vel. Sed ornare ante ex. In semper lectus non fermentum iaculis. Pellentesque quis risus faucibus sem scelerisque blandit. Nulla eget varius ante, non venenatis sapien. Cras sed metus quis leo posuere mollis et vel neque. Aliquam aliquam arcu id dui tristique, congue scelerisque nisi pellentesque. Etiam venenatis est lectus.
Ut tempor lorem in lacus commodo dignissim. Nulla quis porttitor dolor, at ornare magna. Etiam aliquet laoreet nisl, eu fringilla nisi. Nunc pulvinar aliquet tellus, eget accumsan tortor rutrum in. Quisque malesuada posuere urna non interdum. Fusce lorem magna, bibendum sit amet posuere vel, aliquam eget sapien. Nullam enim ligula, dignissim sed feugiat non, ultrices et mauris. Sed justo urna, lacinia sed felis sodales, lacinia viverra purus. Sed nec orci congue, consequat turpis vel, sollicitudin felis. Donec sit amet ullamcorper magna. Aenean volutpat purus quis mauris suscipit, quis ultrices augue mollis. Suspendisse non purus sed dui dictum pretium ut quis ipsum.
Ut cursus sodales nunc, vitae consequat augue tempus in. Cras finibus sapien quis pretium tempus. Maecenas sem nunc, tempor et justo quis, commodo feugiat ligula. Phasellus aliquet risus sem, sit amet interdum risus pulvinar nec. In at nisl id velit lobortis tincidunt. Aliquam et convallis diam. Nulla ac auctor justo.
Curabitur aliquam diam purus, eget fringilla tellus malesuada ut. Donec feugiat turpis id vulputate blandit. Cras nisl sem, viverra a dignissim quis, posuere ac lacus. Donec accumsan placerat neque posuere tempus. Maecenas ac ligula nunc. Suspendisse mauris neque, gravida eget risus a, vulputate tempus lacus. Donec lacus lectus, aliquam vitae purus at, hendrerit pretium sem. Vivamus cursus nulla vitae metus ornare, non bibendum elit posuere. Pellentesque porta nulla dignissim augue semper fringilla.
Morbi malesuada varius rutrum. Sed rhoncus luctus nisl nec laoreet. Ut lacus nisi, viverra vel sollicitudin id, facilisis eu augue. Morbi ut sodales ipsum, ac vehicula quam. In lectus diam, commodo aliquam pellentesque ut, tincidunt vel quam. Nullam vel tellus a purus ultricies sollicitudin. Nunc fringilla eget mauris eu sollicitudin. Vivamus vulputate mauris semper ex efficitur, sed sollicitudin quam fermentum.
Nullam vel nulla ac ligula porttitor luctus. Ut risus urna, finibus eu turpis in, bibendum pellentesque libero. Curabitur non mauris non turpis viverra consectetur eu quis risus. Sed at interdum neque, et pellentesque est. Vestibulum pellentesque lacinia mauris, sit amet tincidunt purus rutrum et. Vivamus mi magna, mollis sed eleifend condimentum, luctus at mauris. Nunc lobortis tincidunt orci. In tincidunt viverra nulla, at cursus nibh fermentum at. Mauris consequat lectus sit amet erat dignissim lobortis. Quisque feugiat metus leo, viverra gravida elit commodo id. Quisque sed vehicula massa. Duis non lacinia ipsum. Quisque sodales dignissim blandit. Mauris consequat pellentesque erat ut pharetra.
Donec in mollis magna. Vestibulum dolor arcu, placerat sit amet efficitur vel, efficitur bibendum quam. Morbi eu purus lectus. Aenean efficitur, eros at vestibulum imperdiet, velit elit posuere urna, sit amet tincidunt sem tortor eu justo. Aenean nec eros vitae mi suscipit pellentesque. Morbi a suscipit dui, sit amet laoreet lectus. Mauris placerat accumsan ipsum vel faucibus. Cras eget congue leo, ac blandit odio. Ut commodo ex eu quam aliquet fringilla. Mauris maximus enim nulla, suscipit faucibus elit iaculis sit amet. Aenean rutrum aliquet mi, nec finibus diam vehicula in. Donec vehicula urna enim, vel vulputate nibh suscipit ac.
Vestibulum volutpat tincidunt orci, eu tincidunt arcu laoreet ut. Integer convallis fringilla leo, a suscipit justo volutpat eget. Vestibulum aliquet neque orci, nec pretium nisl consequat ut. Aliquam pellentesque, lacus a tristique dapibus, justo dolor porttitor metus, quis auctor sem nisi a dui. Aliquam erat volutpat. Phasellus tempus nulla vel dui dignissim, eget consequat lectus feugiat. Nullam mauris orci, suscipit sit amet malesuada nec, pharetra vitae erat. Donec vulputate nisl vel nunc sodales facilisis.
Ut lacinia libero et libero feugiat, vitae mollis lectus fringilla. Suspendisse tincidunt nulla eget odio mollis, ut fringilla libero blandit. Etiam ac tempus nisl. Aliquam dignissim imperdiet lacinia. Proin vehicula turpis eu eros rutrum venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu tellus scelerisque, laoreet urna sit amet, imperdiet augue. Cras viverra libero at efficitur lacinia. Cras vehicula cursus dictum. Vestibulum elit velit, tristique at cursus nec, faucibus vitae lectus. Mauris non nisl eget neque posuere molestie vel ut elit.
<h4 class=pagebreak></h4>
<div class='grid border'>
<div class='col-1-3 border'>
<p><br/>
<div class='sigbox'>
<div class='inbox'>asdf asdf</div>
</div>
<hr align='left' width='100%' style='height:1px; border:none; color:#000; background-color:#000; margin-top: -10px; margin-bottom: 0px;' />
Participant's Name (printed)</p>
</div>
<div class='col-1-3 border'>
<p><br/>
<div class='sigbox' >
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* <div class='inbox'> <img width='100%' alt='star' src='data:image/png;base64,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 AElFTkSuQmCC ' /> </div>
*/
</div>
<hr align='left' width='100%' style='height:1px; border:none; color:#000; background-color:#000; margin-top: -10px; margin-bottom: 0px;' />
Participant's Signature</p>
</div>
<div class='col-1-3 border'>
<p><br/>
<div class='sigbox'>
<div class='inbox'>Mon, May 28, 2018</div>
</div>
<hr align='left' width='100%' style='height:1px; border:none; color:#000; background-color:#000; margin-top: -10px; margin-bottom: 0px;' />
Date</p>
</div>
</div>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-28 20:52:13
这个答案应该适用于非常高的签名和非常广泛的签名。检查我添加到代码中的次要css。在html中，我删除了img标签上的width='100%‘。现在，要么图像将完全填充您设置的高度(100 of )，要么图像将填充div的宽度。为了美观起见，您可能需要将最大高度设置为90 90，最大宽度设置为90%，这取决于您想要留下多少空白。
@media print { .pagebreak { page-break-before: always; } }
h1, h2 { text-align: center; }
h2, h3 { margin-top: 3em; }
body, p, h1, h2, h3 { font-family: Helvetica; }
.col-1-3 { width: 33.3%; float: left; padding-right: 20px; }
.sigbox { position: relative; height: 100px; max-height:100px; display: inline-block; bottom: 10px }
.inbox { position: relative; top: 100%; transform: translateY(-100%); -webkit-transform: translateY(-100%); }
.grid:after { content: ; display: table; clear: both; }
.border { -webkit-box-sizing: border-box; box-sizing: border-box; }
.sigbox{
display:block;}
img{
max-height:100px!important;
max-width:100%!important;
}<html>
<head>
</head>
<body>
<div class='header'></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus felis eros, ullamcorper a sodales et, hendrerit sed neque. Aliquam porta felis at dolor placerat, eget fringilla ipsum faucibus. Maecenas tortor turpis, bibendum non molestie vulputate, lobortis sodales est. Aenean nec nisl rutrum, interdum enim eget, tincidunt justo. Fusce ac hendrerit nisi, sed interdum lectus. Aenean magna enim, consectetur ut nibh vitae, volutpat facilisis quam. Cras metus leo, euismod id orci et, dictum dignissim augue. Mauris id congue dolor. Quisque sit amet mauris in eros imperdiet pharetra. Aliquam lobortis ante ut mauris tincidunt dictum. Suspendisse nisi purus, vulputate rutrum tincidunt id, bibendum vitae ante. Proin et tellus metus. In in nulla ullamcorper, ornare purus a, tincidunt elit. Vivamus eget hendrerit sem. Morbi vitae ligula a metus consectetur sagittis.
Vivamus aliquam molestie nunc, vitae tempor purus dignissim non. Phasellus maximus est ipsum, a dictum quam pharetra id. Mauris ante erat, interdum a massa quis, semper dictum leo. Aliquam convallis tincidunt placerat. Cras ultricies ante et auctor rutrum. Fusce consequat rutrum urna. Quisque vitae hendrerit arcu. In porta suscipit purus, id posuere nisl cursus vel. Sed ornare ante ex. In semper lectus non fermentum iaculis. Pellentesque quis risus faucibus sem scelerisque blandit. Nulla eget varius ante, non venenatis sapien. Cras sed metus quis leo posuere mollis et vel neque. Aliquam aliquam arcu id dui tristique, congue scelerisque nisi pellentesque. Etiam venenatis est lectus.
Ut tempor lorem in lacus commodo dignissim. Nulla quis porttitor dolor, at ornare magna. Etiam aliquet laoreet nisl, eu fringilla nisi. Nunc pulvinar aliquet tellus, eget accumsan tortor rutrum in. Quisque malesuada posuere urna non interdum. Fusce lorem magna, bibendum sit amet posuere vel, aliquam eget sapien. Nullam enim ligula, dignissim sed feugiat non, ultrices et mauris. Sed justo urna, lacinia sed felis sodales, lacinia viverra purus. Sed nec orci congue, consequat turpis vel, sollicitudin felis. Donec sit amet ullamcorper magna. Aenean volutpat purus quis mauris suscipit, quis ultrices augue mollis. Suspendisse non purus sed dui dictum pretium ut quis ipsum.
Ut cursus sodales nunc, vitae consequat augue tempus in. Cras finibus sapien quis pretium tempus. Maecenas sem nunc, tempor et justo quis, commodo feugiat ligula. Phasellus aliquet risus sem, sit amet interdum risus pulvinar nec. In at nisl id velit lobortis tincidunt. Aliquam et convallis diam. Nulla ac auctor justo.
Curabitur aliquam diam purus, eget fringilla tellus malesuada ut. Donec feugiat turpis id vulputate blandit. Cras nisl sem, viverra a dignissim quis, posuere ac lacus. Donec accumsan placerat neque posuere tempus. Maecenas ac ligula nunc. Suspendisse mauris neque, gravida eget risus a, vulputate tempus lacus. Donec lacus lectus, aliquam vitae purus at, hendrerit pretium sem. Vivamus cursus nulla vitae metus ornare, non bibendum elit posuere. Pellentesque porta nulla dignissim augue semper fringilla.
Morbi malesuada varius rutrum. Sed rhoncus luctus nisl nec laoreet. Ut lacus nisi, viverra vel sollicitudin id, facilisis eu augue. Morbi ut sodales ipsum, ac vehicula quam. In lectus diam, commodo aliquam pellentesque ut, tincidunt vel quam. Nullam vel tellus a purus ultricies sollicitudin. Nunc fringilla eget mauris eu sollicitudin. Vivamus vulputate mauris semper ex efficitur, sed sollicitudin quam fermentum.
Nullam vel nulla ac ligula porttitor luctus. Ut risus urna, finibus eu turpis in, bibendum pellentesque libero. Curabitur non mauris non turpis viverra consectetur eu quis risus. Sed at interdum neque, et pellentesque est. Vestibulum pellentesque lacinia mauris, sit amet tincidunt purus rutrum et. Vivamus mi magna, mollis sed eleifend condimentum, luctus at mauris. Nunc lobortis tincidunt orci. In tincidunt viverra nulla, at cursus nibh fermentum at. Mauris consequat lectus sit amet erat dignissim lobortis. Quisque feugiat metus leo, viverra gravida elit commodo id. Quisque sed vehicula massa. Duis non lacinia ipsum. Quisque sodales dignissim blandit. Mauris consequat pellentesque erat ut pharetra.
Donec in mollis magna. Vestibulum dolor arcu, placerat sit amet efficitur vel, efficitur bibendum quam. Morbi eu purus lectus. Aenean efficitur, eros at vestibulum imperdiet, velit elit posuere urna, sit amet tincidunt sem tortor eu justo. Aenean nec eros vitae mi suscipit pellentesque. Morbi a suscipit dui, sit amet laoreet lectus. Mauris placerat accumsan ipsum vel faucibus. Cras eget congue leo, ac blandit odio. Ut commodo ex eu quam aliquet fringilla. Mauris maximus enim nulla, suscipit faucibus elit iaculis sit amet. Aenean rutrum aliquet mi, nec finibus diam vehicula in. Donec vehicula urna enim, vel vulputate nibh suscipit ac.
Vestibulum volutpat tincidunt orci, eu tincidunt arcu laoreet ut. Integer convallis fringilla leo, a suscipit justo volutpat eget. Vestibulum aliquet neque orci, nec pretium nisl consequat ut. Aliquam pellentesque, lacus a tristique dapibus, justo dolor porttitor metus, quis auctor sem nisi a dui. Aliquam erat volutpat. Phasellus tempus nulla vel dui dignissim, eget consequat lectus feugiat. Nullam mauris orci, suscipit sit amet malesuada nec, pharetra vitae erat. Donec vulputate nisl vel nunc sodales facilisis.
Ut lacinia libero et libero feugiat, vitae mollis lectus fringilla. Suspendisse tincidunt nulla eget odio mollis, ut fringilla libero blandit. Etiam ac tempus nisl. Aliquam dignissim imperdiet lacinia. Proin vehicula turpis eu eros rutrum venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu tellus scelerisque, laoreet urna sit amet, imperdiet augue. Cras viverra libero at efficitur lacinia. Cras vehicula cursus dictum. Vestibulum elit velit, tristique at cursus nec, faucibus vitae lectus. Mauris non nisl eget neque posuere molestie vel ut elit.
<h4 class=pagebreak></h4>
<div class='grid border'>
<div class='col-1-3 border'>
<p><br/>
<div class='sigbox'>
<div class='inbox'>asdf asdf</div>
</div>
<hr align='left' width='100%' style='height:1px; border:none; color:#000; background-color:#000; margin-top: -10px; margin-bottom: 0px;' />
Participant's Name (printed)</p>
</div>
<div class='col-1-3 border'>
<p><br/>
<div class='sigbox' >
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* <div class='inbox'> <img alt='star' src='data:image/png;base64,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 AElFTkSuQmCC ' /> </div>
*/
</div>
<hr align='left' width='100%' style='height:1px; border:none; color:#000; background-color:#000; margin-top: -10px; margin-bottom: 0px;' />
Participant's Signature</p>
</div>
<div class='col-1-3 border'>
<p><br/>
<div class='sigbox'>
<div class='inbox'>Mon, May 28, 2018</div>
</div>
<hr align='left' width='100%' style='height:1px; border:none; color:#000; background-color:#000; margin-top: -10px; margin-bottom: 0px;' />
Date</p>
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2018-05-28 20:15:57
问题是，带有类收件箱的div的尺寸与157 X 99.09成比例，而图像的比例为43.95×93.49。如果您使图像宽度约28%，它应该工作，但如果您的图像文件的尺寸要改变，我们需要考虑另一种方法。你可以使用java脚本吗？
好的，这里有一个更好的解决方案：
使图像高度100 to，这是您为sigbox设置的高度，并将显示:内联块更改为display:block，仅用于带类sigbox的div。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50572398
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号