javascript - 对齐打印页面底部的div

Question

我正在使用 ajax 从数据库中获取数据。在这个数据中，我有一个 textarea 我想在每个页面的底部对齐，每个 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();

Js Fiddle

Answer 1

固定位置或绝对位置会导致文本区域重叠，因此我认为您需要将文本区域相对于顶部的位置。您可以在 PrintStyle var 中添加此 .textarea{margin-top: 100%;} 并将类 textarea 添加到每个文本区域。这里的例子:https://jsfiddle.net/L67rohc1/

但是如果你有不同行数的表格，这个 margin-top: 100%; 是不准确的，你应该计算每个 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 等于视口(viewport)初始包含 block 高度的 1%。似乎 70 对于 Firefox 和 90 对于 Chrome 是一个很好的值(value)，但请记住，这个数字可能会改变。这里是完整的例子:https://jsfiddle.net/ob30p19d/