Align div at the bottom of the print page

Question

I am fetching data from database using 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. I tried CSS positions, it's only working for the first page because I have different data in every 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

Position fixed or absolute causes an overlapping of textareas, so I think you need to put the textarea position relative to the top. You could add this .textarea{margin-top: 100%;} in PrintStyle var and add the class textarea to each textarea. Here the example: https://jsfiddle.net/L67rohc1/

But if you have tables with different numbers of rows this margin-top: 100%; is not accurate, you should calculate the top margin of each texarea, using something like this:

$(".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. It seems that 70 is a good value for Firefox and 90 for Chrome, but keep in mind that the number could change. Here the full example: https://jsfiddle.net/ob30p19d/