[英]Align div at the bottom of the print page
I am fetching data from database using ajax. 我使用ajax从数据库中获取数据。 In this data, I have a
textarea
which I want to align at the bottom of every page and every textarea
have different data. 在这个数据中,我有一个
textarea
,我希望在每个页面的底部对齐,每个textarea
都有不同的数据。 I tried CSS positions
, it's only working for the first page because I have different data in every textarea
. 我尝试过
CSS positions
,它只适用于第一页,因为我在每个textarea
都有不同的数据。
var response = {
row1: [{
group: 'Group A'
}],
row2: [{
team: 'Team A',
player: 'Jema',
result: 43,
note: 'won'
},
{
team: 'Team B',
player: 'Deno',
result: 34,
note: 'lost'
},
{
team: 'Team B',
player: 'Niob',
result: 56,
note: 'lost'
},
{
team: 'Team B',
player: 'Skion',
result: 49,
note: 'lost'
},
],
};
var teams = {}
let count = -1;
response.row2.forEach(e => {
if (!(e.team in teams)) {
count++;
teams[e.team] = ["", e.note];
}
teams[e.team][0] += "<tr><td>" + e.player + "<td><input type='text' value='" + e.result + "'></td></tr>";
})
var table = "";
console.log(teams)
for (let team in teams) {
table += '<h2 class="group" style="border: 1px solid black">' +
response.row1[0].group + '</h2>'
table += '<table class="table bordered"><thead><th>Name</th><th>Result</th>
</thead></tbody>';
table += '<tr colspan="2" ><td>' + team + '</td></tr>';
table += teams[team][0];
table += '<div class="notesFooter"><textarea class="note">' +
catg[category][1] + '</textarea></div>';
table += '</tbody></table>';
if (count) table += "<div class='break'></div>"
count--;
}
$("#print").html(table);
var PrintThis = document.getElementById('print');
var PrintStyle = '<style type="text/css">' +
'@media print{' +
'.break { page-break-after: always }' +
'}' +
'</style>';
PrintStyle += PrintThis.innerHTML;
myWin = window.open("");
myWin.document.write(PrintStyle);
myWin.print();
myWin.close();
Position fixed or absolute causes an overlapping of textareas, so I think you need to put the textarea position relative to the top. 位置固定或绝对导致textareas的重叠,所以我认为你需要将textarea位置相对于顶部。 You could add this
.textarea{margin-top: 100%;}
in PrintStyle
var and add the class textarea
to each textarea. 您可以在
PrintStyle
var中添加此.textarea{margin-top: 100%;}
并将类textarea
添加到每个textarea。 Here the example: https://jsfiddle.net/L67rohc1/ 这个例子: https : //jsfiddle.net/L67rohc1/
But if you have tables with different numbers of rows this margin-top: 100%;
但是如果你有不同行数的表,那么这个
margin-top: 100%;
is not accurate, you should calculate the top margin of each texarea, using something like this: 不准确,您应该使用以下内容计算每个texarea的上边距:
$(".table").each(function(i){
prev = $(this).outerHeight()/2;//<-- table height
//90vh in chrome to go closer to the bottom
$(this).next().css( "margin-top", "calc(70vh - "+prev+"px)" );
})
vh
is Equal to 1% of the height of the viewport's initial containing block. vh
等于视口初始包含块高度的1%。 It seems that 70 is a good value for Firefox and 90 for Chrome, but keep in mind that the number could change. 似乎70对于Firefox来说是一个很好的价值,对于Chrome来说是90,但请记住,这个数字可能会发生变化。 Here the full example: https://jsfiddle.net/ob30p19d/
这里有完整的例子: https : //jsfiddle.net/ob30p19d/
在textarea
之前做一个div
,给出style="min-height: 800px; max-height: 800px">
如https://jsfiddle.net/ob30p19d/6/,我希望它能帮到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.