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

固定或绝对位置会导致文本区域重叠，因此我认为您需要相对于顶部放置文本区域。您可以在.textarea{margin-top: 100%;} var中添加此PrintStyle并将类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等于视口的初始包含块的高度的1％。对于Firefox和Chrome，似乎70是一个不错的价格，但请记住，这个数字可能会发生变化。这里是完整的示例：https://jsfiddle.net/ob30p19d/

Answer 2

通过给div来使textarea之前的style="min-height: 800px; max-height: 800px"> 如https://jsfiddle.net/ob30p19d/6/ 希望对您有帮助。

在打印页面底部对齐div

2 个答案: