Экспорт HTML в PDF всегда выравнивается в нижней части новой страницы
У меня проблема с экспортом html в PDF. Я бы хотел, чтобы раздел внизу был всегда выровнен в нижней части новой страницы.
Прямо сейчас этот раздел (когда дело доходит до разрыва страницы) выравнивается в верхней части новой страницы:
![введите описание изображения здесь]()
Код для этого раздела:
<div style='page-break-inside:avoid;vertical-align:bottom;'>
<font face="Verdana" >
<br>
<table cellspacing="0" cellpadding="0" style="width:900px;">
<tbody>
<tr>
<td style="width:500px">
BLAGO DOSTAVIL: ______________________<br/><br/>
Podpis<br/><br/>
Datum: ______________________
</td>
<td>
BLAGO PREVZEL: ______________________<br/><br/>
Podpis<br/><br/>
Datum: ______________________
</td>
</tr>
</tbody>
</table>
</font>
<font face="Verdana" size="1" >
<br /><br />
<table cellspacing="0" cellpadding="0" style="width:900px;">
<tbody>
<tr>
<td style="text-align:center">
<i>
testting d.o.o., testing, ID za DDV: testing, matična št.: testing
<br>
tel: +386 XXXXXXXXXX, fax: +386 1 XXXXXXXXX, e-mail: [email protected], web: www.xxxxxxx.si
<br>
Družba je vpisana pri okrožnem sodišču v Ljubljani, št. vpisa v registru: 1/XXXXX/00, ustanovni kapital: XX.000 EUR
<br>
Račun odprt pri NLB d.d., Iban: SIXXXXXXX, SWIFT-BIC: LJBASI2X
</i>
</td>
</tr>
</tbody>
</table>
</font>
</div>
Ответы
Ответ 1
Я просто переместил таблицу, содержащую контактную информацию в нижней части страницы, в качестве нового:
<tr><td colspan="2"></td></tr>
к таблице мы будем прикреплять ее к нижней части страницы во время печати.
Затем вам нужно добавить только правило стиля для @media print, например:
@media print{
table#stickToFooter{
position: fixed;
bottom: 0;
}
}
Скажем, я не манипулировал вашим кодом в других частях, но как правило best-practice, пожалуйста, постарайтесь избежать окружающих элементов нестрочного уровня в встроенных тегах. Я имею в виду, что было бы намного лучше, если бы вы установили тип и размер шрифта таблицы с помощью этих элементов стиля:
table{
font-family: Verdana, sans-serif;
font-size: 10px
}
чем заключить его в тег <font face="Verdana" size="1">...</font>. Спасибо заранее.
<style>#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%;}
#tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
#tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
</style>
<style>#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
#tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
#tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}</style>
<style>#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
#tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}</style>
<style>
@media print{
table#stickToFooter{
position: fixed;
bottom: 0;
}
}
</style>
<table id='tblArticles'>
<thead>
<th>Vrsta blaga/storitve</th>
<th>Interna številka</th>
<th>Prodana koda</th>
<th>Količina</th>
<th>EnM</th>
<th>Cena brez DDV</th>
<th>Vrednost brez DDV</th>
<th>DDV</th>
<th>Znesek DDV</th>
<th>Vrednost z DDV</th>
</thead>
<tfoot>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
</tfoot>
<tbody style='page-break-inside:avoid;'>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='1' style='page-break-inside:avoid;'><label>Večerja na zajli</label></td>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/VzlSSlNYVlo=.jpg><br/>
<label>VzlSSlNYVlo=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>1,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>9,50 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>8,66 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>99,80 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='7' style='page-break-inside:avoid;'><label>Veliki kuharski mojster</label></td>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/TDZKVzRDVks=.jpg><br/>
<label>TDZKVzRDVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>7,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>65,69 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>459,83 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>22,00 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>101,16 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>560,99 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/Q0U2RURCVks=.jpg><br/>
<label>Q0U2RURCVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/RFg0TVZXVks=.jpg><br/>
<label>RFg0TVZXVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/OFdGRTJLVks=.jpg><br/>
<label>OFdGRTJLVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/QlROR0NMVks=.jpg><br/>
<label>QlROR0NMVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/SjNYWkJOVks=.jpg><br/>
<label>SjNYWkJOVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/M0RFWURXVks=.jpg><br/>
<label>M0RFWURXVks=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
</tr>
</tbody>
</table><br/>
<div style='page-break-inside:avoid;margin-bottom: 30px;'>
<label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
<div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
<table id='tblLeft'>
<th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
<tr>
<td>9,5 %</td><td>91,14 €</td><td>8,66 €</td><td>99,80 €</td>
</tr><tr>
<td>22 %</td><td>459,83 €</td><td>101,16 €</td><td>560,99 €</td>
</tr>
</table>
<table id='tblRight'>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr>
<td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>109,82 €</td>
</tr>
</table>
<label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
<label style='position:absolute;right:0;bottom:20px;'><b>660,79 €</b></label>
</div></div><br/><br/><br/>
<div style='page-break-inside:avoid;vertical-align:bottom;'>
<font face="Verdana" >
<br>
<table cellspacing="0" cellpadding="0" style="width:900px;">
<tbody>
<tr>
<td style="width:500px">
BLAGO DOSTAVIL: ______________________<br/><br/>
Podpis<br/><br/>
Datum: ______________________
</td>
<td>
BLAGO PREVZEL: ______________________<br/><br/>
Podpis<br/><br/>
Datum: ______________________
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center; font-size: 10px;">
<i>
testting d.o.o., testing, ID za DDV: testing, matična št.: testing
<br>
tel: +386 XXXXXXXXXX, fax: +386 1 XXXXXXXXX, e-mail: [email protected], web: www.xxxxxxx.si
<br>
Družba je vpisana pri okrožnem sodišču v Ljubljani, št. vpisa v registru: 1/XXXXX/00, ustanovni kapital: XX.000 EUR
<br>
Račun odprt pri NLB d.d., Iban: SIXXXXXXX, SWIFT-BIC: LJBASI2X
</i>
</td>
</tr>
</tbody>
</table>
</font>
</div>
Ответ 2
Я использовал JS для решения вашей проблемы и внесения незначительных изменений в ваш код. Вы можете посмотреть на него, я отметил свои изменения с комментарием < - EDIT → .
Я предположил, что ваша проблема возникает, когда ваша таблица "Тип товара" или таблица "DDV" становятся слишком высокими, чтобы поместиться на одной странице с вашей секцией "подпись".
My JS script используйте функцию, чтобы проверить высоту этих таблиц, выполнить расчет, и если объединенная высота больше, чем определенная страница treshold (825px), это ручная страница перерыва. После этого он устанавливает маржу для вашего раздела "подпись", чтобы переместить его внизу новой страницы (маржа опасается с 1110 пикселей для EDGE и FFOX до 1160 для CHROME).
Обратите внимание, что эти изменения вступят в силу только для версии "print" (я использовал отдельный <.style > для печати @media) и не отображаются в веб-интерфейсе.
Надеюсь, вы найдете это полезным.
CODE:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--EDIT-->
<!--you can test different height setups for #tblArticles to see how it behaves /more than 825 will triger page break ;-) -->
<style>
#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%; }
#tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
#tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
#tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
#tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
#tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}
</style>
<!--container for js function fun() to put new css rule for print if condition is met (see <script> at the bottom)-->
<style id="printStyle"><!--EDIT-->
</style><!--EDIT-->
</head>
<!-- run function fun() after page is loaded and table height is calculated -->
<body onload="fun()"><!--EDIT-->
<table id='tblArticles'>
<thead>
<th>Vrsta blaga/storitve</th>
<th>Interna številka</th>
<th>Prodana koda</th>
<th>Količina</th>
<th>EnM</th>
<th>Cena brez DDV</th>
<th>Vrednost brez DDV</th>
<th>DDV</th>
<th>Znesek DDV</th>
<th>Vrednost z DDV</th>
</thead>
<tfoot>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
</tfoot>
<tbody style='page-break-inside:avoid;'>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='1' style='page-break-inside:avoid;'><label>Večerja na zajli</label></td>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/VzlSSlNYVlo=.jpg><br/>
<label>VzlSSlNYVlo=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>1,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>91,14 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>9,50 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>8,66 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='1'>99,80 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td rowspan='7' style='page-break-inside:avoid;'><label>Veliki kuharski mojster</label></td>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/TDZKVzRDVks=.jpg><br/>
<label>TDZKVzRDVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>7,00</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>KOM</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>65,69 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>459,83 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>22,00 %</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>101,16 €</td>
<td style='overflow: hidden; white-space: nowrap;' rowspan='7'>560,99 €</td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/Q0U2RURCVks=.jpg><br/>
<label>Q0U2RURCVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/RFg0TVZXVks=.jpg><br/>
<label>RFg0TVZXVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/OFdGRTJLVks=.jpg><br/>
<label>OFdGRTJLVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/QlROR0NMVks=.jpg><br/>
<label>QlROR0NMVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style='border-bottom-style:hidden;'>
<img src=http://localhost:53358/resources/Images/EAN128/SjNYWkJOVks=.jpg><br/>
<label>SjNYWkJOVks=</label><br/>
</td>
<td style='border-bottom-style:hidden;'><input type='checkbox'><br/><label></label><br/></td>
</tr>
<tr style='page-break-inside:avoid;border-bottom:1px solid black !important;'>
<td style=''>
<img src=http://localhost:53358/resources/Images/EAN128/M0RFWURXVks=.jpg><br/>
<label>M0RFWURXVks=</label><br/>
</td>
<td style=''><input type='checkbox'><br/><label></label><br/></td>
</tr>
</tbody>
</table><br/>
<!--i marked this element with ID = middleSection (for script)-->
<div id="middleSection" style='page-break-inside:avoid;margin-bottom: 30px;'><!--EDIT-->
<label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
<div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
<table id='tblLeft'>
<th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
<tr>
<td>9,5 %</td><td>91,14 €</td><td>8,66 €</td><td>99,80 €</td>
</tr><tr>
<td>22 %</td><td>459,83 €</td><td>101,16 €</td><td>560,99 €</td>
</tr>
</table>
<table id='tblRight'>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr>
<td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>550,97 €</td>
</tr>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>109,82 €</td>
</tr>
</table>
<label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
<label style='position:absolute;right:0;bottom:20px;'><b>660,79 €</b></label>
</div></div><br/><br/><br/>
<!--i added this to manualy break page when needed by script-->
<div id="break" style="line-height:1px;"> </div><!--EDIT-->
<!--i marked this element with ID = bottomSection (for script)-->
<div id="bottomSection" style='page-break-inside:avoid;'><!--EDIT-->
<font face="Verdana" >
<br>
<table cellspacing="0" cellpadding="0" style="width:900px;">
<tbody>
<tr>
<td style="width:500px">
BLAGO DOSTAVIL: ______________________<br/><br/>
Podpis<br/><br/>
Datum: ______________________
</td>
<td>
BLAGO PREVZEL: ______________________<br/><br/>
Podpis<br/><br/>
Datum: ______________________
</td>
</tr>
</tbody>
</table>
</font>
<font face="Verdana" size="1" >
<br /><br />
<table cellspacing="0" cellpadding="0" style="width:900px;">
<tbody>
<tr>
<td style="text-align:center">
<i>
testting d.o.o., testing, ID za DDV: testing, matična št.: testing
<br>
tel: +386 XXXXXXXXXX, fax: +386 1 XXXXXXXXX, e-mail: [email protected], web: www.xxxxxxx.si
<br>
Družba je vpisana pri okrožnem sodišču v Ljubljani, št. vpisa v registru: 1/XXXXX/00, ustanovni kapital: XX.000 EUR
<br>
Račun odprt pri NLB d.d., Iban: SIXXXXXXX, SWIFT-BIC: LJBASI2X
</i>
</td>
</tr>
</tbody>
</table>
</font>
</div>
</body>
<!--script-->
<!--EDIT-->
<script>
function fun()
{
var x = document.getElementById("tblArticles").scrollHeight; //825max for A3 / A4 /A5
var y = document.getElementById("middleSection").scrollHeight; //have 180px, but I suppose it height can wary - in dependcy on number of 'Stopnja' of 'DDV' you have in Slovenia?
var z = document.getElementById("bottomSection").scrollHeight; //have 224px, will not change, i suppose.
if ( x+y > 825 ) //if tblArticles height + middleSection height > 825px, break page and move your bottom section to be aligned (i am using margin-top for that) at the bottom of a new page.
{
//USE:
//1160px for EDGE & FIREFOX
//1110px for CHROME
//SAFARI & IE11 not tested, you must figure out.. ;-)
//It is possible to write a function for detection which browser is being used, but if only specific browser will be used in your use case, then there is no need for that.
document.getElementById("printStyle").innerHTML="@media print {#break {page-break-before:always;} #bottomSection {margin:1110px 0px 0px 0px;} }"
}
}
</script>
</html>
Ответ 3
Я использовал JavaScript для измерения высоты страницы, затем решил назначить прозрачную высоту изображения. Поэтому, если общая высота страницы меньше 1000 пикселей, тогда высота прозрачного изображения равна нулю и page-break-before:avoid предполагается, если высота страницы превышает 1000 пикселей, высота прозрачного изображения будет 800 пикселей и page-break-before:always. Итак, раздел, который вы хотите, идет в нижнюю часть следующей страницы. Ниже перечислены изменения в вашем коде:
добавить #breakerdiv { page-break-before:always;} в <style>.
Определите <div id="calc"> вокруг таблицы выше, я имею в виду <table id='tblArticles'>.
Измените <div style='page-break-inside:avoid;vertical-align:bottom;'> на <div id="breakerdiv">.
Добавить
<img id="breaker" src="transparent-image.png" style="height: 10px; width: 400px;
position: relative;">
сразу после <div id="breakerdiv">. Используйте одно прозрачное изображение самостоятельно.
И добавьте этот <script> до </body>
<script>
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
if(height < 1000){document.getElementById("breaker").style.height="0";
document.getElementById("breakerdiv").style.pageBreakBefore="auto"};
if(height > 1000){document.getElementById("breaker").style.height="800px"};
</script>
Я предположил, что ваши варианты - это один или два листа. Вместо этого вы должны изменить <script> для других высот.
Ответ 4
Если вы хотите, чтобы эта часть осталась на той же странице, возможно, нет места для этого, вы должны попробовать изменить размер элементов. Но если вы хотите, чтобы эта часть была внизу следующей страницы:
Измените эту часть:
<div style='page-break-inside:avoid;vertical-align:bottom;'>
в:
<div style="page-break-before: always; vertical-align: bottom;">
Если vertical-align не работает во всех браузерах, попробуйте несколько margin-top.
